* {
    box-sizing:border-box
}
body {
    margin:0;
    background:#f5f7fb;
    color:#172238;
    font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a {
    color:inherit
}
h1,h2,h3,p {
    margin-top:0
}
h1 {
    font-size:clamp(1.9rem,4vw,2.6rem);
    line-height:1.2;
    letter-spacing:-.035em;
    margin-bottom:14px
}
h2 {
    font-size:1.2rem;
    line-height:1.4
}
h3 {
    font-size:1rem
}
.container {
    max-width:1160px;
    margin:auto;
    padding:0 28px
}
.topbar {
    background:white;
    border-bottom:1px solid #e1e7f0;
    margin-bottom:44px
}
.topbar-inner {
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.brand {
    font-weight:800;
    font-size:1.3rem;
    text-decoration:none;
    letter-spacing:-.03em
}
.brand span {
    display:block;
    font-size:.75rem;
    font-weight:400;
    letter-spacing:0;
    color:#637087
}
.badge {
    display:inline-block;
    background:#e9eefc;
    color:#354f97;
    border:1px solid #d9e2f9;
    border-radius:30px;
    padding:5px 12px;
    font-size:.76rem;
    font-weight:650
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:32px
}
.eyebrow {
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#566daa;
    font-weight:700;
    margin-bottom:10px
}
.muted {
    color:#65728a
}
.small {
    font-size:.85rem
}
.button {
    display:inline-block;
    border:0;
    border-radius:8px;
    background:#3656c6;
    color:white;
    text-decoration:none;
    padding:12px 20px;
    font:600 .95rem/1.5 system-ui;
    cursor:pointer;
    white-space:nowrap
}
.button:hover {
    background:#2946ab
}
a:focus-visible,button:focus-visible,input:focus-visible {
    outline:3px solid #7797ff;
    outline-offset:3px
}
.card {
    background:white;
    border:1px solid #e1e7f0;
    border-radius:12px;
    overflow:hidden
}
.card-body,.form-card {
    padding:26px
}
.empty {
    text-align:center;
    padding:65px 24px
}
.empty p {
    color:#65728a
}
.game-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}
.cover {
    display:block;
    width:100%;
    aspect-ratio:460/215;
    object-fit:cover
}
.placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e9eef7;
    color:#65728a
}
.text-link {
    color:#3656c6;
    text-decoration:none;
    font-weight:600
}
.text-link:hover {
    text-decoration:underline
}
.back {
    display:inline-block;
    color:#65728a;
    text-decoration:none;
    margin-bottom:26px
}
.narrow {
    max-width:680px;
    margin:auto
}
.form-card {
    margin-top:30px
}
label {
    display:block;
    font-weight:600;
    margin-bottom:9px
}
input {
    display:block;
    width:100%;
    padding:13px;
    border:1px solid #bdc8da;
    border-radius:7px;
    font:inherit;
    min-width:0
}
.form-card button {
    margin-top:14px
}
.error {
    color:#a12036;
    background:#fff0f2;
    padding:12px;
    border-radius:6px
}
.notice {
    background:#e7f6ed;
    color:#1e6640;
    border:1px solid #b5dec6;
    padding:14px 20px;
    border-radius:8px;
    margin-bottom:24px
}
.game-heading {
    display:flex;
    align-items:center;
    gap:28px;
    margin-bottom:32px
}
.game-header-image {
    width:300px;
    max-width:100%;
    border-radius:10px
}
.tabs {
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    border-bottom:1px solid #dce3ee;
    margin-bottom:24px
}
.tabs a {
    display:inline-block;
    padding:14px 2px;
    text-decoration:none;
    color:#3656c6;
    border-bottom:3px solid transparent;
    font-weight:600
}
.analysis-state {
    padding:26px;
    background:#f0f4ff;
    margin-bottom:24px
}
.analysis-state h2 {
    margin:16px 0 6px
}
.analysis-state p {
    margin:0;
    color:#53637e
}
.details-grid {
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
    align-items:start
}
dl {
    margin:0
}
dt {
    font-size:.8rem;
    color:#65728a;
    margin-top:18px;
    font-weight:600
}
dd {
    margin:3px 0 0;
    overflow-wrap:anywhere
}
.plain-text {
    white-space:pre-line;
    overflow-wrap:anywhere
}
.section {
    margin-top:28px
}
.media-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
}
.screenshot {
    width:100%;
    height:auto;
    display:block;
    border-radius:7px
}
.media-grid h3 {
    margin:14px 0 8px
}
.pagination {
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:28px;
    font-size:.9rem
}
.footer {
    margin-top:60px;
    padding-top:25px;
    padding-bottom:25px;
    color:#65728a;
    font-size:.8rem;
    border-top:1px solid #e1e7f0
}
@media(max-width:800px) {
    .game-grid,.media-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .details-grid {
        grid-template-columns:1fr
    }
    .game-heading {
        align-items:flex-start;
        flex-direction:column
    }

}
@media(max-width:540px) {
    .container {
        padding-left:18px;
        padding-right:18px
    }
    .topbar-inner {
        align-items:flex-start;
        justify-content:center;
        flex-direction:column;
        padding-top:18px;
        padding-bottom:18px;
        gap:10px
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column
    }
    .game-grid,.media-grid {
        grid-template-columns:1fr
    }
    .card-body,.form-card {
        padding:20px
    }
    .game-header-image {
        width:100%
    }
    .topbar {
        margin-bottom:28px
    }

}

.analysis-result { margin-bottom: 24px; }
.analysis-result .details-grid { grid-template-columns: 1fr 1fr; }
.analysis-result h2 { margin-top: 14px; }
.analysis-score { font-size: 2.6rem; font-weight: 750; color: #3656c6; }
.analysis-score span { font-size: 1rem; color: #65728a; }
.analysis-item { border-top: 1px solid #e1e7f0; padding: 18px 0; }
.analysis-item h4 { margin: 10px 0; }
.analysis-item p { margin-bottom: 8px; }
@media(max-width:800px) { .analysis-result .details-grid { grid-template-columns: 1fr; } }

.steam-content-header { width: min(100%, 460px); height: auto; border-radius: 12px; margin: 1rem 0; }
.tabs a[aria-current="page"] { border-bottom: 3px solid currentColor; font-weight: 700; }
details summary { cursor: pointer; line-height: 1.6; }

.form-card select, .form-card textarea { display: block; width: 100%; padding: 12px; border: 1px solid #c4ccda; border-radius: 8px; font: inherit; margin: 8px 0 18px; background: white; }
.inline-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.button.secondary { background: #edf0f7; color: #23344d; }
.table-scroll { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.history-table th, .history-table td { padding: 12px; text-align: left; border-bottom: 1px solid #dce3ee; }
.analysis-metadata { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr; gap: 8px 16px; }
.analysis-metadata dt, .analysis-metadata dd { margin: 0; overflow-wrap: anywhere; }

/* Shared data reliability states: visible labels, not color alone. */
.data-state{margin:.65rem 0}.data-state-badge{display:inline-block;border:1px solid currentColor;border-radius:.4rem;padding:.25rem .55rem;font-size:.85rem;font-weight:600}.data-state-message{margin:.35rem 0;font-size:.9rem;color:#475569}.data-state-confirmed{color:#166534;background:#f0fdf4}.data-state-review{color:#854d0e;background:#fefce8}.data-state-partial{color:#9a3412;background:#fff7ed}.data-state-outdated{color:#1e40af;background:#eff6ff}.data-state-error{color:#991b1b;background:#fef2f2}.data-state-empty{color:#475569;background:#f8fafc}
.data-state-processing{color:#5b21b6;background:#f5f3ff}
.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.summary-card{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}.summary-metric{font-size:1.65rem;font-weight:700;margin:.5rem 0}.summary-card .summary-link{margin-top:auto;padding-top:1rem}.summary-metrics{padding-left:1.2rem}.summary-activity li,.summary-attention li{margin-bottom:.7rem}@media(max-width:1050px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.summary-grid{grid-template-columns:minmax(0,1fr)}}

.data-state-not_verifiable { color: #92400e; background: #fffbeb; border-color: #f59e0b; }
.data-state-classification_pending { color: #1e40af; background: #eff6ff; border-color: #93c5fd; }
.data-state-excluded { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }

.comparison-section{padding:1.5rem;margin:1.5rem 0}.comparison-table{width:100%;border-collapse:collapse;margin:1rem 0}.comparison-table th,.comparison-table td{text-align:left;padding:.75rem;border-bottom:1px solid #dce3ef}.comparison-table th{font-weight:600}.comparison-table td{font-variant-numeric:tabular-nums}.comparison-section p{overflow-wrap:anywhere}
@media(max-width:680px){.comparison-table thead{display:none}.comparison-table,.comparison-table tbody,.comparison-table tr,.comparison-table th,.comparison-table td{display:block;width:100%}.comparison-table tr{margin-bottom:1rem;border:1px solid #dce3ef;border-radius:.5rem}.comparison-table td:before{content:attr(data-label);display:inline-block;width:40%;font-weight:600}.comparison-section{padding:1rem}.comparison-table th,.comparison-table td{box-sizing:border-box}}