.page-notice { max-width: 1000px; margin: 2rem auto 0 auto; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; font-size: 13px; color: #475569; line-height: 1.5; box-sizing: border-box; & > .notice-title { font-weight: bold; color: #0f172a; margin: 0 0 4px 0; } & > .notice-text { margin: 0; & > .badge-ai, & > .badge-data { display: inline-block; padding: 1px 4px; border-radius: 4px; font-weight: bold; font-size: 11px; background: #ffffff; border: 1px solid #cbd5e1; } & > .badge-ai { color: #2563eb; } & > .badge-data { color: #475569; } } } .game-list-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; padding: 6px; max-width: 1000px; margin: 1rem auto 2rem auto; box-sizing: border-box; & > .game-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px 0 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); box-sizing: border-box; overflow: hidden; & > .game-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #64748b; margin-bottom: 4px; border-bottom: 1px dashed #f1f5f9; padding-bottom: 3px; & > .game-time { font-weight: bold; color: #334155; background: #f1f5f9; padding: 1px 4px; border-radius: 3px; } & > img.wt { height: 13px; width: auto; vertical-align: middle; display: inline-block; } } & > .game-match { display: flex; align-items: center; justify-content: space-between; text-align: center; padding: 4px 0 10px 0; width: 100%; min-width: 0; & > .team-a, & > .team-b { flex: 1; font-size: clamp(13px, 3.5vw, 16px); font-weight: bold; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; & > small { display: block; font-size: 11px; font-weight: normal; color: #64748b; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; } } & > .vs { font-size: 11px; font-weight: bold; color: #cbd5e1; padding: 0 6px; font-style: italic; flex-shrink: 0; } } & > .game-actions { display: flex; gap: 1px; margin: 0 -12px; border-top: 1px solid #e2e8f0; background: #e2e8f0; & > .btn-ai, & > .btn-data { flex: 1; display: block; padding: 10px 4px; text-align: center; font-size: 12px; font-weight: bold; text-decoration: none; transition: background 0.15s ease-in-out; } & > .btn-ai { background: #f8fafc; color: #2563eb; &:hover, &:active { background: #eff6ff; } } & > .btn-data { background: #f8fafc; color: #2563eb; &:hover, &:active { background: #eff6ff; } } } } & > .no-game { grid-column: 1 / -1; text-align: center; padding: 24px 20px; color: #64748b; font-size: 14px; background: #f8fafc; border-radius: 8px; border: 1px dashed #cbd5e1; } }