/* Shared Magma layout: warm white surfaces, burgundy actions, existing artwork. */
:root {
    --accent: #ad2024;
    --accent-rgb: 173, 32, 36;
    --steam-text: #ad2024;
    --magma-muted: #746064;
    --magma-border: #e7d7d4;
}

html { scroll-padding-top: 24px; }
body { background: var(--paper); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--red-main); outline-offset: 4px; }
.site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: #fff; }
.skip-link { position: absolute; top: 8px; left: 16px; z-index: 200; padding: 12px 18px; background: #fff; color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
[hidden] { display: none !important; }
.container { max-width: 1480px; }
.site-header .container { max-width: 1480px; padding-inline: 28px; }
.header-inner { gap: 26px; min-height: 88px; }
.header-mobile-panel { flex: 1; }
.main-nav { gap: clamp(12px, 1.8vw, 28px); margin-left: 0; }
.main-nav a { position: relative; min-height: 44px; font-size: 14px; font-weight: 600; color: #f4dfe0; gap: 9px; }
.main-nav a.active::after { content: ""; position: absolute; bottom: 0; left: 29px; right: 0; height: 2px; background: #fff; }
.nav-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.header-actions { gap: 10px; }
.header-actions .icon-btn, .header-actions .steam-btn { min-height: 44px; }
.lang-menu { visibility: hidden; }
.lang-menu.is-open { visibility: visible; }
.lang-menu :focus-visible { outline-color: var(--red-main); }
.lang-menu { width: 310px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 96px); overflow-y: auto; background: #fff; border: 1px solid var(--magma-border); border-radius: 4px; box-shadow: 0 12px 30px #24161826; }
.lang-menu__languages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.lang-menu .lang-option { padding: 10px; min-height: 44px; min-width: 0; gap: 8px; border-radius: 4px; color: var(--ink); }
.lang-menu .lang-option:hover, .lang-menu .lang-option.is-active { background: var(--paper); color: var(--red-main); }
.lang-option strong { font-size: 12px; }
.currency-switcher { position: relative; flex: 0 0 auto; }
.header-actions .currency-toggle { width: 80px; min-width: 80px; padding-inline: 12px; gap: 6px; }
.currency-toggle .lang-badge { letter-spacing: .04em; }
.currency-menu { width: 96px; min-width: 96px; left: auto; right: 0; }
.currency-menu .lang-option { justify-content: center; }
.legal-language-note { padding: 12px 16px; background: var(--paper); border: 1px solid var(--magma-border); color: var(--red-main); }
[data-cart-currency-note], [data-checkout-estimate] { font-size: 11px; line-height: 1.5; color: var(--magma-muted); }
.site-cart-panel__summary { display: grid; gap: 6px; min-width: 0; flex: 1; }
.site-cart-panel__foot { align-items: flex-start; }
.site-cart-panel__offer { flex-shrink: 0; }
[data-checkout-estimate] { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
body[data-page="feedback"] .store-empty { background: var(--paper); border: 1px solid var(--magma-border); border-radius: 4px; color: var(--magma-muted); }
.logo-name__rush { text-shadow: none; }

/* The illustration no longer determines where readable text can fit. */
body[data-page] .hero { background: var(--red-main); min-height: 260px; }
body[data-page] .hero .container { max-width: 1480px; padding-inline: 28px; }
body[data-page] .hero::before { inset: 0 0 0 44%; width: auto; background-position: right center; background-size: auto 100%; }
body[data-page] .hero .hero-overlay { display: none; }
body[data-page="contacts"] .hero { --hero-image: url("../img/contacts-hero-complete.png"); }
body[data-page="contacts"] .hero::before { background-color: #fff; background-size: cover; }
body[data-page] .hero .hero-inner { align-items: center; min-height: 260px; }
body[data-page] .hero .hero-content { width: 44%; max-width: none; padding: 36px 36px 36px 0; min-width: 0; }
body[data-page] .hero h1 { margin: 0 0 16px; max-width: 560px; color: #fff; font-family: "Oxanium", sans-serif; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: -.02em; text-transform: none; text-wrap: balance; overflow-wrap: break-word; }
body[data-page] .hero p { max-width: 460px; color: #f8e8e8; font-size: 14px; line-height: 1.65; }
body[data-page="index"] .hero, body[data-page="index"] .hero .hero-inner { min-height: 370px; }
body[data-page="index"] .hero h1 { font-size: clamp(34px, 3.6vw, 52px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-action { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 18px; border: 1px solid #e4aeb0; border-radius: 4px; color: #fff; font-size: 13px; line-height: 1.4; font-weight: 700; }
.hero-action--primary { background: #fff; border-color: #fff; color: var(--red-main); }
.hero-action:hover { background: #8f1b21; }
.hero-action--primary:hover { background: #f7e6e3; }
/* Keep the original Magma edge panel and its three adjoining feature cards. */
.features .container { max-width: 1660px; }
.features-intro p { color: #f4dfe0; }
.features-intro__eyebrow { color: #eac0c2; }

/* A single animation driver; product names and images stay clear on light cards. */
.live-strip__track { animation: none; }
.live-strip__wrap { grid-template-columns: 112px minmax(0, 1fr); }
.live-strip__label { align-items: center; padding: 24px 12px; }
.live-strip__viewport { padding: 22px 0; }
.live-strip__viewport::before, .live-strip__viewport::after { width: 24px; }
.live-strip .live-card { background: #fffaf8; border-color: #eed8d5; box-shadow: none; }
.live-strip .live-card::before { display: none; }
.live-strip .live-card:hover { background: #fff; border-color: #fff; box-shadow: 0 5px 12px #600c1829; }
.live-card__pulse { background: var(--red-main); box-shadow: none; }
.live-card__time { color: #806569; font-size: 9px; letter-spacing: .04em; }
.live-card img { filter: drop-shadow(0 5px 5px #24161826); }
.live-card h4 { color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.35; min-height: 33px; }
.live-card p { color: var(--red-main); font-family: "Oxanium", sans-serif; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.live-strip__viewport.is-static { overflow-x: auto; }
.live-strip__viewport.is-static::before, .live-strip__viewport.is-static::after { display: none; }
.live-strip__viewport.is-static .live-strip__track { animation: none; transform: none; }

/* One calm surface system across support, reviews and account pages. */
body[data-page="feedback"], body[data-page="contacts"],
body[data-page="feedback"] .feedback-section,
body[data-page="contacts"] .contacts-section { background: var(--paper); }
body[data-page="feedback"] .feedback-summary,
body[data-page="feedback"] .feedback-board,
body[data-page="contacts"] .contacts-block { box-shadow: none; }
body[data-page="feedback"] .feedback-summary__count,
body[data-page="feedback"] .feedback-summary__score-block .feedback-summary__eyebrow { color: #f4dfe0; }
body[data-page="feedback"] .feedback-summary__score-block .feedback-star { color: #ffffff59; }
body[data-page="feedback"] .feedback-summary__score-block .feedback-star.is-active { color: #fff; }
body[data-page="feedback"] .feedback-star.is-active,
body[data-page="feedback"] .feedback-stars--input .feedback-star:hover { color: var(--red-main); border-color: var(--magma-border); background: #ad202414; }
body[data-page="feedback"] .feedback-stars--display .feedback-star { background: transparent; }
body[data-page="feedback"] .feedback-card__badge { color: #8f1b21; border-color: var(--magma-border); background: var(--paper); text-transform: none; letter-spacing: 0; line-height: 1.5; }
body[data-page="feedback"] .feedback-composer__panel { width: min(396px, calc(100vw - 32px)); }
body[data-page="feedback"] .feedback-composer__panel .feedback-form-card { max-height: calc(100dvh - 110px); overscroll-behavior: contain; }
.feedback-composer__panel .feedback-form-card__head { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; gap: 12px; }
.feedback-composer__panel .feedback-form-card__head h2 { font-size: 23px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.feedback-composer__panel .feedback-composer__close { width: 44px; height: 44px; }
.feedback-composer__panel .feedback-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
body[data-page="feedback"] .feedback-form-card__eyebrow { color: var(--red-main); text-transform: none; letter-spacing: 0; }
body[data-page="feedback"] .feedback-field span,
body[data-page="feedback"] .feedback-rating-picker > span { color: var(--magma-muted); }
.feedback-card__identity, .feedback-card__identity > div,
.contacts-chip__body, .profile-identity__copy, .profile-field,
.policy-layout > *, .sell-order > * { min-width: 0; }
.feedback-card, .feedback-summary__feature, .contacts-chip__body,
.profile-identity__copy, .policy-content, .sell-order { overflow-wrap: anywhere; }
.contacts-block__eyebrow, .feedback-board__eyebrow { letter-spacing: .03em !important; }
body[data-page="contacts"] .contacts-block--primary > p,
body[data-page="contacts"] .contacts-community p { color: #f8e8e8; }
body[data-page="contacts"] .contacts-chip__body strong,
body[data-page="contacts"] .contacts-point span { color: var(--red-main); }
body[data-page="contacts"] .support-composer__close { color: var(--red-main); background: var(--paper); min-width: 44px; min-height: 44px; }
body[data-page="contacts"] .support-chat { max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
body[data-page="contacts"] .support-chat__compose { background: var(--paper); border-color: var(--magma-border); }
body[data-page="contacts"] .support-chat__eyebrow { padding: 0; background: transparent; border: 0; color: var(--red-main); letter-spacing: 0; text-transform: none; }
body[data-page="contacts"] .support-field input,
body[data-page="contacts"] .support-field textarea { background: #fff; border-color: var(--magma-border); }
body[data-page="contacts"] .contacts-community { box-shadow: none; }
body[data-page="contacts"] .contacts-link { min-height: 110px; }
.profile-hero { --hero-image: url("../img/hero-bg.png"); }
.feedback-card__message, .feedback-summary__feature-copy p { color: var(--magma-muted); line-height: 1.7; }
.store-checkout-modal__dialog, .feedback-modal__dialog, .steam-auth-modal__dialog, .sell-trade-modal__dialog { max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
.profile-history__grid, .sell-inventory-grid, .feedback-grid { min-width: 0; }

/* Legal links stay intact; company information and support have their own columns. */
.site-footer { background: var(--red-main); padding: 36px 0; }
.site-footer::before { display: none; }
.footer-inner { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px 32px; max-width: none; text-align: left; }
.footer-logo { grid-row: 1 / 4; margin: 0; width: 64px; height: 64px; }
.footer-nav { grid-column: 2; justify-content: flex-start; gap: 8px 22px; margin: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 32px; font-size: 11px; color: #f7e5e5; letter-spacing: 0; text-transform: none; }
.footer-meta { grid-column: 2; margin: 0; gap: 6px; }
.footer-socials { grid-column: 3; grid-row: 1; align-self: start; margin: 0; }
.footer-socials a { width: 40px; height: 40px; color: #fff; }
.footer-mail { grid-column: 3; grid-row: 2; color: #fff; overflow-wrap: anywhere; }
.footer-payments { justify-content: flex-start; margin-block: 6px; }
.footer-payments span { letter-spacing: 0; text-transform: none; }

@media (max-width: 1100px) {
    .header-inner { gap: 16px; }
    .main-nav { gap: 14px; }
    .main-nav a { gap: 6px; font-size: 13px; }
    .header-actions .steam-btn { min-width: 0; padding-inline: 14px; }
    .footer-inner { grid-template-columns: 70px minmax(0, 1fr); gap: 16px 24px; }
    .footer-socials { grid-column: 2; grid-row: auto; justify-content: flex-start; }
    .footer-mail { grid-column: 2; grid-row: auto; }
}

@media (max-width: 980px) {
    .live-strip__wrap { grid-template-columns: minmax(0, 1fr); }
    .live-strip__label { justify-content: flex-start; padding: 14px 18px 0; }
    .site-header .container { padding-inline: 20px; }
    .header-inner { min-height: 76px; padding-block: 12px; }
    .logo { width: 42px; height: 42px; flex-basis: 42px; }
    .header-actions { width: auto; margin-left: auto; flex-wrap: nowrap; }
    .header-burger { order: 4; margin-left: 0; width: 44px; height: 44px; }
    .header-mobile-panel { top: 100%; left: 0; right: 0; max-height: calc(100dvh - 76px); overflow-y: auto; padding: 16px 20px; border: 0; border-top: 1px solid #c54b4e; border-radius: 0; background: var(--red-main); visibility: hidden; box-shadow: 0 12px 24px #24161826; }
    .site-header.is-mobile-open .header-mobile-panel { visibility: visible; }
    .main-nav { gap: 4px; align-items: stretch; }
    .main-nav a { padding: 10px 12px; font-size: 15px; }
    .main-nav a.active { background: #ffffff14; border-radius: 4px; }
    .main-nav a.active::after { display: none; }
    .mobile-nav-overlay { background: #24161866; backdrop-filter: none; }
    body[data-page] .hero .container { padding-inline: 24px; }
    body[data-page] .hero .hero-content { width: 48%; padding-right: 24px; }
    body[data-page] .hero::before { left: 48%; }
    body[data-page="index"] .hero h1 { font-size: 38px; }
}

@media (max-width: 640px) {
    .feature-card { padding-bottom: 40px; }
    .live-strip__viewport { padding-block: 16px; }
    .live-strip__viewport::before, .live-strip__viewport::after { width: 12px; }
    .live-card h4 { font-size: 11px; min-height: 30px; }
    .container, .site-header .container { padding-inline: 16px; }
    .header-inner { gap: 10px; min-height: 72px; }
    .header-actions { gap: 8px; }
    .header-actions .steam-btn { min-width: 44px; width: 44px; padding: 0; justify-content: center; }
    .header-actions .steam-btn > span:not(.steam-profile__avatar), .header-actions .steam-profile__meta { display: none; }
    .header-actions .steam-btn--profile { gap: 0; }
    .header-actions .icon-btn { width: 44px; }
    .header-actions .lang-toggle { min-width: 54px; width: auto; padding-inline: 8px; gap: 6px; }
    .lang-switcher { width: auto; flex: 0 0 auto; }
    .header-actions .currency-toggle { min-width: 66px; width: 66px; gap: 4px; }
    .lang-menu { position: fixed; top: 80px; left: auto; right: 16px; min-width: 0; }
    .currency-menu { position: absolute; top: calc(100% + 10px); right: 0; left: auto; }
    .header-mobile-panel { max-height: calc(100dvh - 72px); }
    body[data-page] .hero, body[data-page="index"] .hero { min-height: 0; }
    body[data-page] .hero .container { padding-inline: 20px; }
    body[data-page] .hero::before { inset: auto 0 0; height: 130px; background-size: auto 130px; background-position: right center; }
    body[data-page] .hero .hero-inner, body[data-page="index"] .hero .hero-inner { min-height: 0; padding-bottom: 130px; }
    body[data-page] .hero .hero-content { width: 100%; padding: 28px 0 30px; }
    body[data-page] .hero h1, body[data-page="index"] .hero h1 { font-size: 34px; max-width: 440px; }
    body[data-page] .hero p { font-size: 14px; max-width: 440px; }
    .hero-actions { margin-top: 20px; gap: 10px; }
    .hero-action { flex: 1 1 130px; padding-inline: 12px; font-size: 12px; }
    body[data-page="contacts"] .contacts-section .container,
    body[data-page="feedback"] .feedback-section .container { padding-inline: 16px; }
    .feedback-board__head, .feedback-toolbar, .support-chat__header { flex-wrap: wrap; gap: 12px; }
    .feedback-toolbar > *, .contacts-chip, .profile-field__control { min-width: 0; max-width: 100%; }
    .feedback-toolbar { align-items: stretch; }
    .contacts-chip__body span { font-size: 12px; }
    body[data-page="contacts"] .contacts-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body[data-page="contacts"] .contacts-link { min-height: 90px; padding-inline: 4px; }
    body[data-page="contacts"] .contacts-link span { font-size: 10px; letter-spacing: 0; }
    body[data-page="contacts"] .support-composer { left: auto; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; }
    body[data-page="contacts"] .support-composer__toggle { width: 56px; min-width: 56px; min-height: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 8px; }
    .support-composer__toggle-copy { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    body[data-page="contacts"] .support-composer__panel { width: calc(100vw - 32px); max-width: 420px; }
    .feedback-composer { left: auto; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; }
    body[data-page="feedback"] .feedback-composer__toggle { width: 56px; min-width: 56px; min-height: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 8px; }
    .feedback-composer__toggle-copy { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .feedback-field input, .feedback-field textarea, .support-field input, .support-field textarea, .profile-field input { font-size: 16px; }
    .profile-balance-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .profile-balance-row strong { overflow-wrap: anywhere; }
    .site-cart-panel { top: 80px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 92px); overflow-y: auto; }
    .footer-inner { grid-template-columns: 1fr; gap: 18px; }
    .footer-logo { grid-column: 1; grid-row: auto; width: 48px; height: 48px; }
    .footer-nav, .footer-meta, .footer-socials, .footer-mail { grid-column: 1; grid-row: auto; }
    .footer-nav { gap: 4px 18px; }
    .footer-socials { gap: 8px; }
    .footer-socials a { width: 44px; height: 44px; }
}

@media (max-width: 374px) {
    .site-header .container { padding-inline: 12px; }
    .header-inner { gap: 6px; }
    .header-actions { gap: 4px; }
    .header-actions .lang-toggle { min-width: 44px; width: 44px; }
    .header-actions .currency-toggle { min-width: 52px; width: 52px; }
    .header-actions .lang-toggle i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}