/* 星火游戏厅 · 共享样式（作用域 .sg-*；色板跟随站点明暗双主题变量，均带兜底） */
.sg-wrap { max-width: 780px; margin: 0 auto; padding: 16px 16px 64px; }

/* 顶栏 */
.sg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sg-top .sg-back { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.88rem; padding: 6px 12px; border:1px solid rgba(255,255,255,0.12); border-radius: 20px; }
.sg-top .sg-back:hover { border-color: rgba(139,92,246,0.5); color: #a78bfa; }
.sg-title { font-size: 1.25rem; font-weight: 800; color: var(--form-text, #e2e8f0); display:flex; align-items:center; gap:8px; }
.sg-title .sg-emoji { font-size: 1.5rem; }

/* 日报条 */
.sg-briefing { font-size: 0.82rem; color: rgba(255,255,255,0.62); background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.22); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; line-height: 1.5; }

/* 画布区 */
.sg-stage { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 10px; margin-bottom: 12px; }
#sg-canvas-wrap { display: flex; justify-content: center; }
#sg-canvas-wrap canvas { max-width: 100%; border-radius: 10px; background: #0f172a; }

/* 控制条 */
.sg-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.sg-btn { padding: 9px 16px; border: none; border-radius: 10px; font-size: 0.88rem; font-weight: 600; cursor: pointer; color: #fff; background: linear-gradient(135deg, #6366f1, #8b5cf6); transition: transform .15s, opacity .15s; text-decoration:none; display:inline-block; }
.sg-btn:hover { transform: translateY(-1px); }
.sg-btn.violet { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.sg-btn.amber { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.sg-btn.secondary { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.78); }
.sg-guest { font-size: 0.78rem; color: rgba(255,255,255,0.45); }

/* tips 滚动条 */
.sg-tips { min-height: 0; font-size: 0.84rem; color: #fbbf24; background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.18); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; display: none; }
.sg-tips.show { display: block; }

/* 经济口径行 */
.sg-costs { font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 14px; }

/* HUD/toast/遮罩 */
#sg-hud { position: relative; }
.sg-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); background: rgba(15,23,42,0.95); border: 1px solid rgba(139,92,246,0.5); color: #e2e8f0; padding: 10px 18px; border-radius: 24px; font-size: 0.86rem; opacity: 0; pointer-events: none; transition: all .25s; z-index: 900; max-width: 86vw; text-align: center; }
.sg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sg-mask { position: fixed; inset: 0; background: rgba(2,6,23,0.72); display: flex; align-items: center; justify-content: center; z-index: 950; padding: 18px; }
.sg-dialog { background: #111827; border: 1px solid rgba(139,92,246,0.35); border-radius: 18px; padding: 22px; max-width: 420px; width: 100%; max-height: 82vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.sg-dialog-title { font-size: 1rem; font-weight: 700; color: #e2e8f0; margin-bottom: 12px; }
.sg-settle-score { font-size: 2rem; font-weight: 800; text-align: center; color: #a78bfa; margin-bottom: 6px; }
.sg-goal { text-align: center; font-size: 0.86rem; color: rgba(255,255,255,0.55); margin-bottom: 12px; }
.sg-goal.ok { color: #34d399; }
.sg-award { text-align: center; font-size: 0.92rem; color: #fbbf24; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); border-radius: 10px; padding: 7px 10px; margin-bottom: 8px; }
.sg-settle-note { font-size: 0.8rem; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 8px; line-height: 1.5; }
.sg-settle-note a { color: #a78bfa; }
.sg-btn-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0 8px; }
.sg-settle-tip { font-size: 0.78rem; color: rgba(255,255,255,0.42); text-align: center; border-top: 1px dashed rgba(255,255,255,0.12); padding-top: 10px; }
.sg-lb-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.sg-lb-table th { color: rgba(255,255,255,0.4); text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 500; }
.sg-lb-table td { color: rgba(255,255,255,0.75); padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sg-lb-rank { font-weight: 700; width: 34px; }
.sg-lb-rank.gold { color: #fbbf24; } .sg-lb-rank.silver { color: #94a3b8; } .sg-lb-rank.bronze { color: #cd7f32; }

/* 玩法/FAQ/互荐（页面静态区） */
.sg-section { margin-top: 22px; }
.sg-section h2 { font-size: 1.02rem; font-weight: 700; color: var(--form-text, #e2e8f0); border-left: 3px solid #8b5cf6; padding-left: 10px; margin-bottom: 12px; }
.sg-howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.sg-howto .step { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px; font-size: 0.84rem; color: rgba(255,255,255,0.72); line-height: 1.55; }
.sg-howto .step b { color: #a78bfa; display: block; margin-bottom: 4px; }
.sg-faq details { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.sg-faq summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--form-text, #e2e8f0); }
.sg-faq details p { font-size: 0.84rem; color: rgba(255,255,255,0.62); margin: 8px 0 2px; line-height: 1.6; }
.sg-rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.sg-rec a { display: block; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.25); border-radius: 12px; padding: 12px 14px; text-decoration: none; transition: transform .15s; }
.sg-rec a:hover { transform: translateY(-2px); }
.sg-rec .r-name { color: #a5b4fc; font-weight: 700; font-size: 0.9rem; }
.sg-rec .r-why { color: rgba(255,255,255,0.55); font-size: 0.78rem; margin-top: 3px; }
.sg-notice { font-size: 0.76rem; color: rgba(255,255,255,0.42); margin-top: 18px; line-height: 1.6; }

/* 大厅 hub */
.sg-hub-hero { text-align: center; padding: 28px 20px 20px; }
.sg-hub-hero h1 { font-size: 1.8rem; font-weight: 800; background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
.sg-hub-hero .sg-tag { color: rgba(255,255,255,0.6); font-size: 0.92rem; max-width: 560px; margin: 0 auto; line-height: 1.6; }
.sg-cat { margin-top: 26px; }
.sg-cat > h2 { font-size: 1.08rem; color: var(--form-text, #e2e8f0); margin-bottom: 4px; }
.sg-cat > .sg-cat-blurb { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin-bottom: 12px; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sg-card { display: block; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 18px; text-decoration: none; transition: all .2s; position: relative; }
.sg-card:hover { transform: translateY(-3px); border-color: rgba(139,92,246,0.45); box-shadow: 0 12px 30px rgba(99,102,241,0.15); }
.sg-card .sg-c-emoji { font-size: 2rem; margin-bottom: 8px; }
.sg-card .sg-c-name { color: var(--form-text, #e2e8f0); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.sg-card .sg-c-tag { color: rgba(255,255,255,0.55); font-size: 0.78rem; line-height: 1.5; }
.sg-card .sg-c-state { position: absolute; top: 12px; right: 12px; font-size: 0.68rem; padding: 2px 8px; border-radius: 10px; background: rgba(52,211,153,0.15); color: #34d399; }
.sg-card .sg-c-state.gold { background: rgba(251,191,36,0.15); color: #fbbf24; }

/* 亮色主题微调 */
body.light .sg-toast { background: rgba(255,255,255,0.97); color: #1e293b; border-color: rgba(139,92,246,0.4); }
body.light .sg-dialog { background: #ffffff; border-color: rgba(139,92,246,0.3); }
body.light .sg-dialog *, body.light .sg-lb-table td { color: #334155; }
body.light .sg-settle-score { color: #7c3aed; }
@media (max-width: 480px) {
    .sg-wrap { padding: 10px 10px 48px; }
    .sg-btn { padding: 8px 12px; font-size: 0.82rem; }
}