/* Native PHP/JavaScript interaction layer. The reference design is in reference.css. */
html { scroll-padding-top: 110px; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[data-unconfigured] { cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #bf1531 !important; outline-offset: 5px; }
.mobile-panel { position: fixed; z-index: 55; top: 100px; left: 24px; right: 24px; border: 1px solid #ffffff1a; border-radius: 16px; padding: 16px; backdrop-filter: blur(22px); }
.mobile-panel > a { display: block; padding: 12px 0; }
.mobile-actions { display: flex; align-items: center; gap: 16px; padding-top: 12px; margin-top: 8px; border-top: 1px solid #ffffff1a; font-size: 13px; }
.mobile-actions [data-theme-toggle] { font-size: 22px; min-width: 32px; }
.mobile-connect { margin-left: auto; padding: 10px 16px; border-radius: 12px; background: #bf1531; color: #fff !important; font-weight: 600; }
dialog.modal-panel { margin: auto; width: min(448px, calc(100% - 32px)); max-height: calc(100svh - 48px); padding: 28px; border-width: 1px; border-radius: 16px; overflow: auto; }
dialog::backdrop { background: #000b; backdrop-filter: blur(12px); }
dialog[open] { animation: dialog-in .3s ease both; }
.dialog-close { position: absolute; top: 12px; right: 16px; font: 30px/1 sans-serif; width: 28px; height: 28px; }
.dialog-action { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 24px; padding: 8px 20px; border-radius: 999px; font-weight: 700; }
.dialog-secondary { margin-top: 12px; border: 1px solid #ffffff26; }
html.light .dialog-secondary { border-color: #0002; }
body:has(dialog[open]) { overflow: hidden; }
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity .85s ease, transform 1.1s cubic-bezier(.22,1,.36,1); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
#factions button:focus-visible .faction-copy p { opacity: 1; max-height: 112px; }
html.light .legal h2 { color: #121214; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) { .mobile-panel { display: none !important; } }

/* Existing neutral surfaces are preserved. Crimson comes from the supplied logo. */
.site-logo { width: 76px; height: 50px; object-fit: contain; }
.site-nav > a { gap: 10px; }
.site-logo--mark { width: 30px; height: 38px; }
html.light .site-logo--mark, html.light .section-mark { filter: brightness(0); }
footer .site-logo { width: 138px; height: 93px; }
.sec-head__brand { transform: none; padding-right: 16px; }
.sec-head__brand img { width: 48px; height: 32px; object-fit: contain; }
.sec-head__brand img.section-mark { width: 24px; height: 30px; }
.faction-frame .section-mark { filter: brightness(0); }
html.light .faction-frame .section-mark { filter: none; }
.site-nav > nav { gap: 22px; }
@media (max-width: 480px) { .sec-head__brand { padding-right: 10px; } .sec-head__brand img { width: 38px; height: 26px; } }
@media (max-width: 420px) { .sec-head { gap: 10px; } .sec-head__brand { font-size: 16px; padding-right: 10px; } .sec-head h2 { white-space: normal; font-size: 18px; } .mobile-actions { gap: 10px; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* The same full-color galleries, image zoom and perspective as the reference. */
#cars article, #factions button { will-change: transform; }
.site-logo--white { width: 64px; height: 43px; }
html.light .site-logo--white, html.light footer .site-logo { filter: brightness(0); }
.footer-character { max-width: 43%; object-fit: contain; object-position: bottom right; }
@media (min-width: 768px) { .footer-copy { max-width: min(520px,55%); } }

.auth-user-name { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog.auth-panel { width: min(440px,calc(100% - 32px)); padding: 36px 32px 24px; text-align: center; border-top: 2px solid #bf1531; box-shadow: 0 30px 100px #0009; }
.auth-logo { display: block; width: 74px; height: 50px; object-fit: contain; margin: 0 auto 27px; }
.auth-panel h2 { font-family: var(--font-sora),sans-serif; font-weight: 700; font-size: 25px; letter-spacing: -.035em; line-height: 1.3; }
.auth-description { margin: 14px auto 26px; max-width: 300px; color: #99969f; font-size: 13px; line-height: 1.8; }
.auth-discord-button svg { width: 22px; height: 22px; }
.auth-discord-button > span { margin-left: auto; font-size: 20px; }
.auth-privacy { margin-top: 14px; color: #77737c; font-size: 10px; }
.auth-footer { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #ffffff12; color: #87828c; font-size: 10px; }
.auth-footer a:hover { color: #fff; }
.auth-notice { margin: 0 0 20px; padding: 12px; border: 1px solid #bf15314d; border-radius: 10px; background: #bf15310d; color: #da9ba6; font-size: 12px; line-height: 1.7; }
.auth-avatar { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 50%; margin: 0 auto 20px; background: #bf1531; color: #fff; font-size: 24px; font-weight: 700; }
html.light .auth-logo { filter: brightness(0); }
html.light .auth-footer { border-color: #0001; }
html.light .auth-footer a:hover { color: #111; }
html.light .auth-notice { color: #9e1230; }
.imports-lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 0 26px; color: #929099; font-size: 12px; }
.imports-lead > span { font-size: 10px; color: #67636d; }
.import-info { padding: 19px 20px; }
.import-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.import-name p { font-size: 14px; }
.import-name .muted-tag { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.import-purchase { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.import-purchase strong { font-family: var(--font-sora),sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.04em; }
.import-purchase .chip { gap: 12px; font-size: 11px; height: 32px; }
.import-info { background: #0d0d0f; }
html.light .import-info { background: #f7f7f9; }

/* Shared original button fill; provider controls do not use a separate style. */
.auth-discord-button { gap: 12px; width: 100%; margin-top: 26px; font-size: 13px; }
.step-logo-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; margin-bottom: 22px; }
.step-logo { display: block; width: 64px; height: 48px; object-fit: contain; object-position: left center; }
.step-logo--gta { width: 72px; height: 56px; }
.step-number { align-self: start; color: #bf1531; font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.step-card .step-copy { font-size: 13px; line-height: 1.7; margin-bottom: 22px; }
.step-card .chip { gap: 7px; }
.store-icon { width: 14px; height: 14px; object-fit: contain; }
.step-logo--mono { transition: filter .3s; }
.step-card:hover .step-logo--mono, html.light .step-logo--mono { filter: brightness(0); }
@media (max-width: 1023px) {
    .step-card { min-height: 230px; }
    .step-logo-row { margin-bottom: 18px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .howto-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.gallery-all { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; color: #555; font-size: 11px; font-weight: 700; white-space: nowrap; }
.gallery-all > span { color: #bf1531; font-size: 19px; }
.gallery-mosaic { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,160px); gap: 12px; }
.gallery-mosaic > a, .gallery-grid > button { position: relative; display: block; min-width: 0; overflow: hidden; border-radius: 16px; background: #111; }
.gallery-mosaic > a:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-mosaic img, .gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gallery-mosaic a:hover img, .gallery-grid button:hover img { transform: scale(1.05); }
.gallery-photo-caption { display: flex; align-items: end; justify-content: space-between; gap: 12px; position: absolute; inset: auto 0 0; padding: 35px 18px 15px; background: linear-gradient(transparent,#000c); color: #fff; font-size: 11px; font-weight: 700; }
.gallery-photo-caption > span { font-size: 20px; font-weight: 400; }
.main-gallery { padding: 140px 40px 40px; }
.gallery-back { display: inline-block; margin-bottom: 32px; color: #999; font-size: 12px; }
.main-gallery .sec-head h1 { color: #d8d8d8; font-size: 20px; font-weight: 500; }
.gallery-count { color: #777; font-size: 11px; white-space: nowrap; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.gallery-filters .is-active { background: #bf1531; border-color: #bf1531; color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.gallery-grid > button { aspect-ratio: 4/3; text-align: left; }
dialog.photo-viewer { margin: auto; padding: 0; width: min(1180px,calc(100% - 40px)); max-height: calc(100svh - 40px); overflow: visible; border: 0; border-radius: 16px; background: #0d0d0f; color: #fff; }
.photo-viewer figure { margin: 0; }
.photo-viewer figure > img { display: block; width: 100%; max-height: calc(100svh - 100px); object-fit: contain; border-radius: 16px 16px 0 0; }
.photo-viewer figcaption { padding: 16px 20px; color: #aaa; font-size: 12px; }
.photo-viewer .dialog-close { z-index: 2; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: #000b; color: #fff; }
html.light .gallery-frame { background: #111; }
html.light .gallery-all { color: #bbb; }
html.light .main-gallery .sec-head h1 { color: #111; }
@media (max-width: 1023px) { .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 639px) {
    .gallery-mosaic { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(4,135px); }
    .gallery-mosaic > a:first-child { grid-row: span 2; }
    .gallery-all { font-size: 10px; gap: 5px; }
    .gallery-frame .sec-head { flex-wrap: wrap; }
    .gallery-frame .sec-head__line { display: none; }
    .main-gallery { padding: 125px 24px 24px; }
    .gallery-grid { gap: 10px; }
    .gallery-photo-caption { padding: 30px 12px 12px; font-size: 10px; }
    .gallery-count { margin-left: auto; }
}