/* Shared device checklist: deliberately separate from verified app metadata. */
.system-requirements {
    --requirements-ink: #192a23;
    --requirements-green: #17613e;
    width: 100%;
    min-width: 0;
    margin-top: 32px;
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid #dce8df;
    border-radius: 28px;
    color: var(--requirements-ink);
    background: #fff;
    box-shadow: 0 18px 50px -32px rgba(28, 69, 44, .3), inset 0 1px 0 #fff;
    scroll-margin-top: 98px;
}
.system-requirements-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; min-width: 0; }
.system-requirements-heading > div { flex: 1 1 290px; min-width: 0; }
.requirements-eyebrow { display: block; color: #376d44; font-size: 10px; font-weight: 850; letter-spacing: .15em; line-height: 1.5; }
.system-requirements-heading h3 { margin: 8px 0 10px; color: var(--requirements-ink); font-size: clamp(26px, 2.7vw, 36px); font-weight: 850; letter-spacing: -.045em; line-height: 1.13; overflow-wrap: anywhere; }
.system-requirements-heading p { max-width: 630px; margin: 0; color: #5a6b61; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.requirements-badge { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 10px 13px; border: 1px solid #d5e7c4; border-radius: 999px; color: #315c32; background: #f3f9e9; font-size: 10px; font-weight: 750; line-height: 1.5; overflow-wrap: anywhere; }
.requirements-badge i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #648e24; }
.system-requirements-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; }
.system-requirements-grid .requirement-card { position: relative; min-width: 0; margin: 0; padding: 20px 12px 24px; border: 1px solid #e0e9de; border-radius: 21px; text-align: center; background: linear-gradient(180deg, #fcfef9 0%, #fff 78%); box-shadow: 0 7px 0 -4px #edf2e9, 0 16px 26px -22px rgba(34, 66, 37, .42), inset 0 1px 0 #fff; }
.system-requirements-grid dt { margin: 0; padding: 0; color: #4d6555; font-size: 12px; font-weight: 650; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.requirement-visual { position: relative; display: block; width: min(100%, 148px); aspect-ratio: 1; margin: 0 auto 16px; }
.requirement-visual::before { position: absolute; content: ""; width: 66%; height: 16%; left: 17%; bottom: 2%; border-radius: 50%; background: radial-gradient(ellipse, rgba(83, 114, 51, .16), transparent 70%); }
.requirement-visual img { position: relative; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; animation: requirements-float 6s ease-in-out infinite; }
.requirement-card:nth-child(2) img { animation-delay: -.8s; }
.requirement-card:nth-child(3) img { animation-delay: -1.6s; }
.requirement-card:nth-child(4) img { animation-delay: -2.4s; }
.requirement-card:nth-child(5) img { animation-delay: -3.2s; }
.requirement-label { display: block; overflow-wrap: anywhere; }
.system-requirements-grid dd { margin: 7px 0 0; color: var(--requirements-ink); font-size: clamp(16px, 1.4vw, 20px); font-weight: 850; line-height: 1.4; letter-spacing: -.035em; overflow-wrap: anywhere; }
.requirements-disclaimer { display: flex; align-items: flex-start; gap: 12px; margin: 25px 0 0; padding: 17px 18px; border: 1px solid #dce7d6; border-radius: 14px; color: #4c6051; background: #f6f9f2; font-size: 12px; line-height: 1.75; }
.requirements-disclaimer > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.requirements-note-icon { display: inline-grid; flex: 0 0 19px; width: 19px; height: 19px; margin-top: 1px; place-items: center; border: 1px solid #72906b; border-radius: 50%; color: #3d6741; font-family: Georgia, serif; font-size: 12px; font-weight: bold; line-height: 1; }
.requirements-extra { margin: 20px 0 0; color: #4c6051; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
@keyframes requirements-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 1023px) {
    .system-requirements-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 760px) {
    .system-requirements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .system-requirements { padding: 22px 16px; border-radius: 22px; }
    .system-requirements-heading > div { flex-basis: 100%; }
    .system-requirements-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 24px; }
    .system-requirements-grid .requirement-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 16px; align-items: center; min-height: 122px; padding: 17px 16px; text-align: left; }
    .system-requirements-grid dt { grid-column: 2; grid-row: 1; align-self: end; }
    .requirement-visual { position: absolute; top: 50%; left: 16px; width: 88px; margin: 0; transform: translateY(-50%); }
    .system-requirements-grid dd { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 18px; }
    .requirements-disclaimer { gap: 9px; padding: 14px 12px; font-size: 12px; }
}
@media (max-width: 360px) {
    .system-requirements { padding-inline: 12px; }
    .system-requirements-grid .requirement-card { grid-template-columns: 68px minmax(0, 1fr); gap: 3px 12px; min-height: 102px; padding: 14px 12px; }
    .requirement-visual { left: 12px; width: 68px; }
}
@media (prefers-reduced-motion: reduce) {
    .requirement-visual img { animation: none !important; transform: none !important; }
}
@media print {
    @page { margin: 15mm; }
    body.game-detail-page { padding: 0; color: #111; background: #fff; overflow: visible; }
    .game-detail-page .site-header, .game-detail-page .detail-toc, .game-detail-page .reading-progress, .game-detail-page .skip-link,
    .game-detail-page .mobile-download-dock, .game-detail-page .back-to-top, .game-detail-page .hero-actions,
    .game-detail-page .identity-actions, .game-detail-page .promo-section, .game-detail-page .site-footer,
    .game-detail-page .detail-glow, .game-detail-page .download-dialog, .game-detail-page .btn { display: none !important; }
    .game-detail-page .container { width: 100%; max-width: none; }
    .game-detail-page .section { padding-block: 20px; }
    .game-detail-page .detail-hero-grid, .game-detail-page .detail-layout, .game-detail-page .install-detail-layout { display: block; min-height: 0; }
    .game-detail-page .detail-hero, .game-detail-page .install-detail-section, .game-detail-page .safety-detail-section { color: #111; background: #fff; }
    .game-detail-page .detail-hero p, .game-detail-page .install-detail-section p { color: #333; }
    .game-detail-page .checklist-panel { display: block; padding: 18px; overflow: visible; border: 1px solid #bbb; border-radius: 10px; color: #111; background: #fff; box-shadow: none; }
    .game-detail-page .checklist-panel h3 { max-width: none; margin-block: 8px 12px; color: #111; font-size: 22px; }
    .game-detail-page .checklist-panel p, .game-detail-page .checklist-panel .section-kicker { color: #333; }
    .game-detail-page .checklist-panel > div > p { font-size: 12px; }
    .game-detail-page .check-progress { display: none; }
    .game-detail-page .checklist-panel li { border: 1px solid #ccc; break-inside: avoid; }
    .game-detail-page .checklist-panel li > button { grid-template-columns: 35px minmax(0, 1fr); color: #111; }
    .game-detail-page .checklist-panel li > button > span { width: 30px; height: 30px; color: #333; background: #fff; }
    .game-detail-page .checklist-panel li > button > i { display: none; }
    .game-detail-page .faq-list summary > span[aria-hidden="true"] { display: none; }
    .game-detail-page .system-requirements, .preview-guide-layer .system-requirements { width: 100%; margin: 16px 0; padding: 18px; border: 1px solid #aaa; border-radius: 10px; color: #111; background: #fff; box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
    .system-requirements-heading h3 { font-size: 23px; color: #111; }
    .system-requirements-heading p, .requirements-eyebrow { color: #333; }
    .requirements-badge { display: none; }
    .system-requirements-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 15px; }
    .system-requirements-grid .requirement-card { display: block; min-height: 0; padding: 10px 6px 12px; border: 1px solid #ccc; border-radius: 8px; text-align: center; background: #fff; box-shadow: none; break-inside: avoid; }
    .system-requirements-grid dt { display: block; color: #333; font-size: 10px; }
    .requirement-visual { position: relative; top: auto; left: auto; width: 58px; margin: 0 auto 7px; transform: none; }
    .requirement-visual::before { display: none; }
    .requirement-visual img { animation: none !important; transform: none !important; }
    .system-requirements-grid dd { margin-top: 4px; color: #111; font-size: 12px; line-height: 1.35; }
    .requirements-disclaimer { margin-top: 13px; padding: 10px; border-color: #aaa; color: #222; background: #fff; font-size: 10px; line-height: 1.5; }
    .requirements-note-icon { color: #222; border-color: #777; }
}