/* ==========================================================================
   TETHER RUST — "SCRAPYARD OUTLAW"
   --------------------------------------------------------------------------
   THESIS         The store is a salvage trading post welded onto a scrapyard
                  wall, not a web page with cards. Every offer is a riveted
                  sheet-metal placard bolted to corrugated siding and labelled
                  with crate stencils. Refuses the category default: neon
                  gradient cards floating on a blurred game screenshot.
   OWN-WORLD      Oxidised sheet metal. Vertical corrugation, rust bloom
                  seeping from seams, bolt heads at panel corners, hazard tape
                  on structural edges, weld beads on seams. Panels are SHEARED,
                  never rounded. Crate stencil over depot signage over
                  workhorse body, one hand-sprayed tag. Ember orange is the
                  only colour that means "act".
   STORY          Land, see the sign hung crooked, read 3X / MAX 5 / LOOT X3
                  stamped into three plates, see who is on the server right
                  now, copy the IP, then walk the wall of kits.
   FIRST VIEWPORT Corrugated wall full bleed, embers rising. Riveted signboard
                  at -1.2deg carrying the logo with a sprayed tag over its
                  corner. Punched rate plates beneath. Machine plate holding
                  the IP with COPY and CONNECT; CONNECT is the only saturated
                  element above the fold. Population reads as a filling ammo
                  belt, never a ring or a big number.
   FORM           Scrapyard Outlaw, pinned by the brief. Staging: weathered
                  depot wall at architectural scale, one crooked sign as focus.
   --------------------------------------------------------------------------
   Every texture here is generated in CSS. Nothing is hotlinked except the
   Rust item art from rustlabs, which is the world's own grammar.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* Fallbacks. style-imports.html overwrites these from the theme editor. */
    --tr-ember: #ff6b1a;
    --tr-flame: #ff9e2c;
    --tr-gold: #ffc24a;
    --tr-oxide: #6b3a18;
    --tr-oxide-deep: #38200f;
    --tr-oxide-lit: #8f5222;
    --tr-hazard: #e0ba45;
    --tr-blood: #a81e12;
    --tr-pine: #26332c;
    --tr-bone: #ede4d6;
    --tr-ash: #a2937f;

    --tr-void: #0a0806;
    --tr-iron: #13100c;
    --tr-steel: #1d1813;
    --tr-steel-lit: #2a231b;
    --tr-seam: #362b20;

    /* Type */
    --font-stencil: 'Black Ops One', 'Haettenschweiler', 'Impact', sans-serif;
    --font-sign: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
    --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-spray: 'Permanent Marker', 'Segoe Script', cursive;

    /* Rhythm */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4.5rem;
    --sp-9: 7rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur: 260ms;

    /* ---------- MATERIALS ---------- */

    /* Fine-grain oxide grit. Overlay-blended, never on its own. */
    --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");

    /* Long horizontal scratches and gouges. */
    --tex-scratch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.008 0.7' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23s)'/%3E%3C/svg%3E");

    /* Architectural corrugation — the wall. 26px pitch. */
    --tex-corrugate: repeating-linear-gradient(90deg,
        rgba(0, 0, 0, 0.62) 0px,
        rgba(0, 0, 0, 0.20) 3px,
        rgba(255, 255, 255, 0.055) 9px,
        rgba(255, 255, 255, 0.085) 13px,
        rgba(255, 255, 255, 0.028) 17px,
        rgba(0, 0, 0, 0.24) 23px,
        rgba(0, 0, 0, 0.62) 26px);

    /* Panel-scale ribs. 13px pitch. */
    --tex-rib: repeating-linear-gradient(90deg,
        rgba(0, 0, 0, 0.44) 0px,
        rgba(0, 0, 0, 0.10) 2px,
        rgba(255, 255, 255, 0.048) 5px,
        rgba(255, 255, 255, 0.018) 8px,
        rgba(0, 0, 0, 0.17) 11px,
        rgba(0, 0, 0, 0.44) 13px);

    /* Rust seeping through. */
    --tex-bloom:
        radial-gradient(58% 44% at 6% 10%, rgba(160, 88, 36, 0.40) 0%, rgba(107, 58, 24, 0.16) 46%, transparent 72%),
        radial-gradient(46% 62% at 94% 76%, rgba(107, 58, 24, 0.42) 0%, rgba(56, 32, 15, 0.20) 50%, transparent 78%),
        radial-gradient(32% 28% at 64% 4%, rgba(178, 100, 40, 0.20) 0%, transparent 70%),
        radial-gradient(42% 32% at 26% 100%, rgba(84, 44, 18, 0.36) 0%, transparent 74%);

    --tex-bloom-hot:
        radial-gradient(70% 55% at 50% 108%, rgba(255, 107, 26, 0.16) 0%, transparent 66%),
        radial-gradient(52% 42% at 4% 6%, rgba(178, 100, 40, 0.34) 0%, transparent 70%),
        radial-gradient(48% 56% at 96% 84%, rgba(107, 58, 24, 0.42) 0%, transparent 76%);

    /* Bolt heads, one per corner. */
    --tex-bolts:
        radial-gradient(circle 4.5px at 13px 13px, rgba(237, 228, 214, 0.34) 0 30%, rgba(0, 0, 0, 0.72) 58%, transparent 60%),
        radial-gradient(circle 4.5px at calc(100% - 13px) 13px, rgba(237, 228, 214, 0.34) 0 30%, rgba(0, 0, 0, 0.72) 58%, transparent 60%),
        radial-gradient(circle 4.5px at 13px calc(100% - 13px), rgba(237, 228, 214, 0.34) 0 30%, rgba(0, 0, 0, 0.72) 58%, transparent 60%),
        radial-gradient(circle 4.5px at calc(100% - 13px) calc(100% - 13px), rgba(237, 228, 214, 0.34) 0 30%, rgba(0, 0, 0, 0.72) 58%, transparent 60%);

    --tex-hazard: repeating-linear-gradient(45deg,
        var(--tr-hazard) 0 12px,
        #100c08 12px 24px);

    /* Sheared plate outlines. Cut corners, slight irregularity. */
    --cut-panel: polygon(0 24px, 24px 0, calc(100% - 7px) 0, 100% 11px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 9px 100%, 0 calc(100% - 10px));
    --cut-plate: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    --cut-sm: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    --cut-tab: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);

    /* Compatibility with the stock template's variable names. */
    --text-color: var(--tr-ash);
    --bg-color: var(--tr-void);
    --panel-body: var(--tr-iron);
    --border-color: var(--tr-seam);
    --border: 1px solid var(--tr-seam);
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    --first-color: var(--tr-seam);
    --second-color: var(--tr-steel);
    --input: var(--tr-void);
    --logo-height: 100px;
    --transition: var(--dur) var(--ease-out);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--content-text-color, #ded2bf);
    background-color: var(--background-color, #0a0806);
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-color: var(--tr-oxide) var(--tr-void);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--background-color, #0a0806);
    color: var(--content-text-color, #ded2bf);
    overflow-x: clip;
}

::selection {
    background: var(--tr-ember);
    color: #16100a;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--tr-flame);
    outline-offset: 3px;
}

/* Scrollbar as a machined channel. */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #0d0a07;
    box-shadow: inset 1px 0 0 #241c14;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, var(--tr-oxide) 0%, var(--tr-oxide-deep) 100%);
    border: 2px solid #0d0a07;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #9a5a26 0%, var(--tr-oxide) 100%);
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.tr-stencil,
.page-heading,
.pageTitle,
.serverTitle,
.serverSubtitle,
.productTitle,
.productSubtitle,
.productSectionHeading,
.tr-section-title,
.tr-hero-word,
.nothingFound,
.storeName,
.checkoutThankYouMessage,
.popupTitle,
.tr-cta-title,
.tr-wipe-title {
    font-family: var(--font-stencil);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 0.92;
    /* Ink bleed: stencil paint sprayed onto metal sits slightly proud. */
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.9),
        0 2px 0 rgba(0, 0, 0, 0.55),
        0 4px 14px rgba(0, 0, 0, 0.7);
}

.tr-label,
.tr-plate-label {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tr-ash);
}

.tr-spray {
    font-family: var(--font-spray);
    text-transform: lowercase;
    color: var(--tr-ember);
    letter-spacing: 0.01em;
    line-height: 0.95;
    /* Overspray halo. */
    text-shadow:
        0 0 1px rgba(255, 107, 26, 0.9),
        0 0 12px rgba(255, 107, 26, 0.45),
        0 2px 0 rgba(0, 0, 0, 0.5);
}

.tr-prose {
    max-width: 68ch;
}

.tr-lede {
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--tr-ash);
    max-width: 62ch;
}


/* ==========================================================================
   4. LAYOUT SHELL
   ========================================================================== */

.pageContainer {
    max-width: 1320px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.container {
    position: relative;
    height: 100%;
}

.body {
    position: relative;
    background-color: var(--background-color, #0a0806);
}

/* The wall. Everything sits on oxidised corrugated siding. */
/* `isolation` traps the decorative pseudo-elements below the content. It also
   traps the mobile menu and tab overlays, so this has to outrank the top bar or
   they open *behind* it. */
.mainContainer {
    position: relative;
    z-index: 5;
    background-color: var(--background-color, #0a0806);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    isolation: isolate;
}

.mainContainer::before,
.mainContainer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Corrugation + rust bloom + vertical light falloff. */
.mainContainer::before {
    background-image:
        linear-gradient(180deg, rgba(10, 8, 6, 0.86) 0%, rgba(10, 8, 6, 0.55) 30%, rgba(10, 8, 6, 0.78) 100%),
        var(--tex-bloom),
        var(--tex-corrugate);
    background-size: auto, cover, auto;
    z-index: -2;
}

/* Grit + scratches. */
.mainContainer::after {
    background-image: var(--tex-scratch), var(--tex-grain);
    background-size: 500px 500px, 200px 200px;
    opacity: 0.14;
    mix-blend-mode: overlay;
    z-index: -1;
}

.pageContainer.\!min-h-\[calc\(100vh-16\.5rem\)\],
.pageContainer {
    position: relative;
    z-index: 1;
}

.main-content {
    position: relative;
}


/* ==========================================================================
   5. BACKGROUND ANIMATION LAYERS
   ========================================================================== */

.tr-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.tr-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Slow searchlight raking across the yard. */
.tr-bg-sweep {
    position: absolute;
    left: 50%;
    top: -60%;
    width: 160vmax;
    height: 160vmax;
    transform-origin: 50% 50%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(255, 158, 44, 0.055) 6deg,
            rgba(255, 107, 26, 0.11) 11deg,
            rgba(255, 158, 44, 0.045) 16deg,
            transparent 24deg,
            transparent 360deg);
    mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, 0.55) 45%, transparent 80%);
    animation: tr-sweep 34s linear infinite;
    will-change: transform;
}

@keyframes tr-sweep {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Furnace glow bleeding up from the bottom of the page. */
.tr-bg-forge {
    position: absolute;
    left: 50%;
    bottom: -22vh;
    width: min(140vw, 1700px);
    height: 62vh;
    transform: translateX(-50%);
    background:
        radial-gradient(58% 100% at 50% 100%, rgba(255, 107, 26, 0.20) 0%, rgba(168, 60, 14, 0.10) 40%, transparent 72%);
    animation: tr-forge 7.5s ease-in-out infinite alternate;
}

@keyframes tr-forge {
    from { opacity: 0.55; transform: translateX(-50%) scaleY(0.94); }
    to   { opacity: 1;    transform: translateX(-50%) scaleY(1.06); }
}

/* Static vignette so the corners stay heavy. */
.tr-bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 32%, transparent 38%, rgba(6, 5, 4, 0.62) 100%);
}


/* ==========================================================================
   6. MATERIAL PRIMITIVES
   ========================================================================== */

/* A sheared sheet-metal plate. Applied via ::before so inline background
   images from the theme editor still show through underneath. */
.tr-plate {
    position: relative;
    background-color: transparent;
    isolation: isolate;
}

.tr-plate > * {
    position: relative;
    z-index: 1;
}

.tr-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: var(--cut-panel);
    background-color: var(--content-background-color, #16120e);
    background-image:
        var(--tex-bolts),
        linear-gradient(168deg, rgba(255, 255, 255, 0.05) 0%, transparent 34%, rgba(0, 0, 0, 0.34) 100%),
        var(--tex-bloom),
        var(--tex-rib);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -2px 0 rgba(0, 0, 0, 0.7),
        inset 0 0 40px rgba(0, 0, 0, 0.6);
}

/* Grit pass over the plate. */
.tr-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: var(--cut-panel);
    background-image: var(--tex-scratch), var(--tex-grain);
    background-size: 500px 500px, 200px 200px;
    opacity: 0.16;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Hazard tape strip. */
.tr-hazard-strip {
    height: 10px;
    background-image: var(--tex-hazard);
    background-size: 34px 34px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    opacity: 0.85;
}

.tr-hazard-strip--thin {
    height: 5px;
    opacity: 0.6;
}

/* Weld seam. */
.tr-weld {
    height: 4px;
    background-image:
        repeating-radial-gradient(circle 5px at 6px 2px,
            rgba(255, 255, 255, 0.13) 0 40%,
            rgba(0, 0, 0, 0.5) 55%,
            transparent 58%);
    background-size: 12px 4px;
    opacity: 0.7;
}


/* ==========================================================================
   7. TOP BAR
   ========================================================================== */

.topbar-account {
    position: relative;
    z-index: 3;
    background-color: var(--topbar-background-color, #0d0a08);
    background-image: var(--tex-rib);
    background-blend-mode: overlay;
    color: var(--topbar-text-color, #a2937f);
    padding-top: 9px;
    padding-bottom: 9px;
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    line-height: 1.6;
    text-transform: uppercase;
    border-bottom: 1px solid var(--topbar-border-color, #2a2118);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.topbar-account a {
    color: var(--topbar-link-color, #ded2bf);
    transition: color var(--dur) var(--ease-out);
    white-space: nowrap;
}

.topbar-account a i {
    color: var(--topbar-link-icon-color, #ff6b1a);
    transition: color var(--dur) var(--ease-out);
    margin-right: 2px;
}

.topbar-account a:hover {
    color: var(--topbar-link-hover-color, #fff);
}

.topbar-account a:hover i {
    color: var(--topbar-link-icon-hover-color, #ffc24a);
}

/* Live status ticker rail. */
.tr-statusbar {
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, #0f0b08 0%, #080605 100%);
    border-bottom: 1px solid #241c14;
    overflow: hidden;
}

.tr-statusbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--tex-grain);
    background-size: 200px;
    opacity: 0.1;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.tr-statusbar-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 34px;
}

.tr-status-live {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 0 0;
    margin-right: 16px;
    border-right: 1px solid #2a2118;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tr-bone);
    white-space: nowrap;
    flex-shrink: 0;
}

.tr-status-dot {
    width: 7px;
    height: 7px;
    background: #3fa63f;
    box-shadow: 0 0 0 2px rgba(63, 166, 63, 0.22), 0 0 10px rgba(63, 166, 63, 0.8);
    animation: tr-blip 2.4s var(--ease-out) infinite;
    flex-shrink: 0;
}

.tr-status-dot--idle {
    background: var(--tr-ash);
    box-shadow: none;
    animation: none;
}

@keyframes tr-blip {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

.tr-status-count {
    color: var(--tr-flame);
    font-variant-numeric: tabular-nums;
}

/* Marquee of server facts. */
.tr-ticker {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.tr-ticker-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    animation: tr-marquee 46s linear infinite;
    will-change: transform;
}

.tr-ticker:hover .tr-ticker-track {
    animation-play-state: paused;
}

.tr-ticker-item {
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tr-ash);
    padding: 0 22px;
    position: relative;
}

.tr-ticker-item::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translateY(-50%) rotate(45deg);
    background: var(--tr-oxide);
}

@keyframes tr-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* Currency selector. */
#currencySelection {
    font-family: var(--font-sign);
    letter-spacing: 0.12em;
}

.currenciesList {
    position: absolute;
    left: 0;
    top: 34px;
    background: #17120d;
    border: 1px solid var(--tr-seam);
    padding: 6px;
    min-width: 116px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8);
    z-index: 20;
    clip-path: var(--cut-sm);
}

.currenciesList li a {
    display: block;
    padding: 5px 9px;
    font-family: var(--font-sign);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--topbar-link-color, #ded2bf);
    transition: background var(--dur) var(--ease-out);
}

.currenciesList li a:hover {
    background: rgba(255, 107, 26, 0.14);
}

.currenciesList i {
    color: var(--topbar-link-color, #ded2bf) !important;
    opacity: 0.28;
}

.currenciesList .active,
.currencySelectionOpen {
    color: var(--topbar-link-hover-color, #fff) !important;
}

.currenciesList .active i,
.currencySelectionOpen i {
    color: var(--topbar-link-icon-hover-color, #ffc24a) !important;
    opacity: 1;
}


/* ==========================================================================
   8. HEADER & NAVIGATION
   ========================================================================== */

header {
    position: relative;
    z-index: 4;
    background-color: var(--header-background-color, transparent);
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
    margin-bottom: 0;
}

.header-top {
    gap: var(--sp-4);
    row-gap: var(--sp-3);
}

/* Mascot logos carry a lot of internal padding, so the plate has to be tall
   enough for the mark itself to read at a glance. */
.header-logo img {
    display: block;
    max-height: 84px;
    width: auto;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 26px rgba(255, 107, 26, 0.16));
    transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}

.header-logo a:hover img {
    transform: translateY(-2px) rotate(-0.6deg);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 34px rgba(255, 107, 26, 0.32));
}

/* Stencil wordmark fallback when no logo is configured. */
.storeName,
.tr-wordmark {
    font-family: var(--font-stencil);
    font-size: clamp(1.5rem, 3.6vw, 2.375rem);
    line-height: 0.9;
    margin: 0;
    color: var(--tr-bone);
    text-transform: uppercase;
}

.tr-wordmark {
    display: flex;
    flex-direction: column;
}

.tr-wordmark-top {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.75em;
    letter-spacing: 0.42em;
    color: var(--tr-bone);
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
}

.tr-wordmark-bottom {
    font-family: var(--font-stencil);
    font-size: 2.1em;
    line-height: 0.86;
    color: var(--tr-ember);
    letter-spacing: -0.01em;
    text-shadow:
        0 2px 0 #7d2f05,
        0 4px 0 rgba(0, 0, 0, 0.85),
        0 0 30px rgba(255, 107, 26, 0.4);
}

.header-account {
    row-gap: var(--sp-2);
    flex-wrap: wrap;
}

.header-item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Nav links read as stamped depot labels. */
.header-button-transparent {
    position: relative;
    background: transparent;
    background-image: none;
    border: 0;
    color: var(--header-link-color, #c9bba6);
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 10px 4px;
    box-shadow: none;
    transition: color var(--dur) var(--ease-out);
}

.header-button-transparent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 4px;
    height: 2px;
    background: var(--tr-ember);
    transition: right var(--dur) var(--ease-out);
}

.header-button-transparent:hover {
    color: var(--tr-bone);
}

.header-button-transparent:hover::after {
    right: 0;
}

.header-button-active {
    color: var(--header-link-color-active, #ff8c34);
}

.header-button-active::after {
    right: 0;
    background: var(--header-link-color-active, #ff8c34);
}

/* Cart chip. */
.header-button-cart {
    padding: 10px 14px;
}

.header-cart {
    font-family: var(--font-sign);
    font-weight: 600;
    letter-spacing: 0.14em;
    font-size: 0.8125rem;
}

span.cart-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 12px 10px;
    margin-left: -2px;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0;
    background: var(--button2-background-color, #ffc24a);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 55%);
    color: var(--button2-text-color, #17100a);
    border-bottom: 4px solid var(--button2-shadow-color, #8a6114);
    border-left: 1px solid rgba(0, 0, 0, 0.35);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    vertical-align: middle;
}

/* Mobile menu. */
.header-button-hamburger {
    width: 46px;
    height: 46px;
    padding: 0;
    font-size: 1.1rem;
}

/* A sheet dropped over the page, not a panel centred on the header — with more
   than three links a header-centred menu slides up behind the top bar and
   swallows its own close button. */
.headerMobileMenu {
    position: fixed;
    left: 14px;
    right: 14px;
    top: 14px;
    z-index: 60;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #17120d;
    border: 1px solid var(--tr-seam);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9);
    clip-path: var(--cut-plate);
}

.headerMobileMenuTitle {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    font-family: var(--font-stencil);
    font-size: 1.25rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--tr-bone);
    background: linear-gradient(180deg, #241c14, #17120d);
    border-bottom: 1px solid var(--tr-seam);
}

.headerMobileMenuLinks li a {
    display: block;
    padding: 15px 18px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-bone);
    background: transparent;
    border-bottom: 1px solid #221a13;
    transition: background var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}

.headerMobileMenuLinks li a:hover {
    background: rgba(255, 107, 26, 0.12);
    padding-left: 26px;
}

.headerMobileMenuOverlay,
.pageLinksOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 5, 0.86);
    backdrop-filter: blur(8px);
    z-index: 20;
}

.headerMobileMenuOverlay {
    z-index: 55;
}

.headerMobileMenuOverlayClose,
.pageLinksOverlayClose {
    cursor: pointer;
    display: block !important;
    background: transparent;
    border: 0;
    padding: 0 6px;
    font-size: 1.25rem;
    color: var(--tr-ash);
    box-shadow: none;
}

.headerMobileMenuOverlayClose:hover,
.pageLinksOverlayClose:hover {
    color: var(--tr-ember);
    background: transparent;
}


/* ==========================================================================
   9. BUTTONS — stamped steel that physically presses
   ========================================================================== */

.btn,
.header-button,
.serverSelectionButton,
.productSelectionButton,
.add-btn,
.tr-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
    padding: 15px 24px;
    color: var(--button-text-color, #140c05);
    background-color: var(--button-background-color, #ff6b1a);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(0, 0, 0, 0.14) 100%);
    border: 0;
    border-bottom: 5px solid var(--button-shadow-color, #7d2f05);
    border-radius: 0;
    clip-path: var(--cut-sm);
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 120ms var(--ease-out),
        border-bottom-width 120ms var(--ease-out),
        filter var(--dur) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

/* Ember rakes across the face on hover. */
.btn::before,
.header-button::before,
.serverSelectionButton::before,
.productSelectionButton::before,
.tr-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.42) 48%,
            transparent 66%);
    transform: translateX(-120%);
    transition: transform 620ms var(--ease-out);
    pointer-events: none;
}

.btn:hover::before,
.header-button:hover::before,
.serverSelectionButton:hover::before,
.productSelectionButton:hover::before,
.tr-btn:hover::before {
    transform: translateX(120%);
}

.btn:hover,
.header-button:hover,
.serverSelectionButton:hover,
.productSelectionButton:hover,
.add-btn:hover,
.tr-btn:hover {
    color: var(--button-text-color, #140c05);
    filter: brightness(1.1) saturate(1.06);
}

/* The steel lip collapses under your thumb. */
.btn:active,
.header-button:active,
.serverSelectionButton:active,
.productSelectionButton:active,
.add-btn:active,
.tr-btn:active {
    transform: translateY(4px);
    border-bottom-width: 1px;
}

.header-button:disabled,
.btn:disabled,
.tr-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.header-button:disabled:active,
.btn:disabled:active {
    transform: none;
    border-bottom-width: 5px;
}

/* Sizes */
.btn {
    font-size: 1rem;
    padding: 16px 28px;
}

.header-button {
    font-size: 0.8125rem;
    padding: 13px 18px;
}

.header-button-large,
.btn-checkout,
.serverSelectionButton,
.productSelectionButton {
    font-size: 1.0625rem;
    padding: 17px 30px;
}

.tr-btn-lg {
    font-size: 1.125rem;
    padding: 19px 34px;
    letter-spacing: 0.14em;
}

/* Variants.
   Add to Cart and Proceed to Checkout stay on the base ember: they are the
   actions the store exists for. Subscribe is gold because it is a different
   billing shape, not a lesser one. Gift and Go Back drop to steel. */
.tr-btn-ghost,
.btn-go-back,
.header-button-gift {
    background-color: var(--button3-background-color, #3a322a);
    border-bottom-color: var(--button3-shadow-color, #171310);
    color: var(--button3-text-color, #ede4d6);
}

.tr-btn-ghost:hover,
.btn-go-back:hover,
.header-button-gift:hover {
    color: var(--button3-text-color, #ede4d6);
}

.header-button-subscribe,
.btn-viewSubscription,
.tr-btn-gold {
    background-color: var(--button2-background-color, #ffc24a);
    border-bottom-color: var(--button2-shadow-color, #8a6114);
    color: var(--button2-text-color, #17100a);
}

.header-button-subscribe:hover,
.btn-viewSubscription:hover,
.tr-btn-gold:hover {
    color: var(--button2-text-color, #17100a);
}

/* Outlined steel — for secondary actions that must not compete. */
.tr-btn-steel {
    background-color: #241d16;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 50%),
        var(--tex-rib);
    background-blend-mode: normal, overlay;
    color: var(--tr-bone);
    border-bottom-color: #0d0a07;
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.09);
}

.tr-btn-steel:hover {
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 158, 44, 0.4);
}

.btn-empty-cart {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    padding: 8px 13px;
    border-bottom-width: 3px;
    background-color: #2a201a;
    border-bottom-color: #120d0a;
    color: var(--tr-ash);
}

.btn-empty-cart:hover {
    background-color: #3a221c;
    color: #ffb1a4;
}

.btn-viewTrash {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 9px 13px;
    border-bottom-width: 3px;
    background-color: #2c1a17;
    border-bottom-color: #140b09;
    color: #d8a79c;
}

.btn-viewTrash:hover {
    background-color: var(--tr-blood);
    color: #fff;
}

.btn-cancelSubscription {
    font-size: 0.8125rem;
    padding: 12px 18px;
    background-color: #2c1a17;
    border-bottom-color: #140b09;
    color: #d8a79c;
}

.btn-cancelSubscription:hover {
    background-color: var(--tr-blood);
    color: #fff;
}

.btn-checkout {
    width: 100%;
}

.btn-checkoutConfirmation {
    margin-top: var(--sp-5);
}

.header-button-subscribe {
    margin-right: 6px;
}

.header-button-addtocart {
    margin-right: 6px;
}

.header-button-single-server {
    clip-path: var(--cut-sm);
}

/* When a game-server dropdown is welded to the subscribe button, the two
   become one assembly, so the seam between them is flat. */
.select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #241d16;
    background-image: var(--tex-rib);
    background-blend-mode: overlay;
    color: var(--tr-bone);
    border-bottom: 5px solid #0d0a07;
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.09);
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% 100%, 0 100%);
    margin-right: -1px;
    font-family: var(--font-sign);
    font-weight: 600;
}

.select-wrapper i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--tr-flame);
    font-size: 0.8125rem;
}

#gameServerDropdown {
    width: 100%;
    max-width: 190px;
    background: transparent;
    border: 0;
    appearance: none;
    color: var(--tr-bone);
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 15px 36px 15px 16px;
    cursor: pointer;
}

#gameServerDropdown option {
    background: #17120d;
    color: var(--tr-bone);
}

.header-button-subscribe {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}


/* ==========================================================================
   10. PAGE HEADINGS
   ========================================================================== */

.page-title-container {
    padding-top: var(--sp-6);
    margin-bottom: var(--sp-6);
}

.page-heading {
    font-size: clamp(2.5rem, 7.5vw, 5.25rem);
    color: var(--page-title-text-color, #ede4d6);
    margin: 0;
}

.page-subheading {
    margin-top: var(--sp-3);
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--page-subtitle-text-color, #a2937f);
    max-width: 62ch;
}

.pageTitle {
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--content-heading-alt-color, #ede4d6);
    margin: 0;
}

.pageSubtitle {
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--content-heading-color, #ff9e2c);
    margin-top: var(--sp-2);
}

/* Section heading assembly: stencil title with a Rust item stamped beside it. */
.tr-section-head {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    flex-wrap: wrap;
}

.tr-section-stamp {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #191410;
    background-image: var(--tex-rib);
    background-blend-mode: overlay;
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.7),
        0 8px 20px rgba(0, 0, 0, 0.6);
    clip-path: var(--cut-sm);
}

.tr-section-stamp img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(1.18) saturate(1.1) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

.tr-section-title {
    font-size: clamp(1.75rem, 4.4vw, 3rem);
    color: var(--tr-bone);
    margin: 0;
}

.tr-section-sub {
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tr-ash);
    margin-top: 6px;
}

/* Dividers are cut seams, not hairlines. */
.pageDivider,
.productDivider {
    width: 100%;
    height: 6px;
    margin: var(--sp-5) 0;
    display: block;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0 2px, rgba(237, 228, 214, 0.08) 2px 3px, rgba(0, 0, 0, 0.7) 3px 6px);
    position: relative;
}

.pageDivider::after,
.productDivider::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 84px;
    height: 6px;
    background: var(--tr-ember);
    box-shadow: 0 0 14px rgba(255, 107, 26, 0.6);
}


/* ==========================================================================
   11. HERO
   ========================================================================== */

.tr-hero {
    position: relative;
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem);
    overflow: hidden;
}

.tr-hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    filter: saturate(0.55) contrast(1.1);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 65%, transparent 100%);
}

.tr-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

/* --- The crooked sign --- */
.tr-sign {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 560px;
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 3.5vw, 2.5rem);
    transform: rotate(-1.2deg);
    animation: tr-sign-hang 9s ease-in-out infinite alternate;
    transform-origin: 50% 0;
}

@keyframes tr-sign-hang {
    from { transform: rotate(-1.55deg); }
    to   { transform: rotate(-0.75deg); }
}

.tr-sign::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: var(--cut-panel);
    background-color: #191410;
    background-image:
        var(--tex-bolts),
        linear-gradient(158deg, rgba(255, 255, 255, 0.09) 0%, transparent 30%, rgba(0, 0, 0, 0.42) 100%),
        var(--tex-bloom-hot),
        var(--tex-corrugate);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -3px 0 rgba(0, 0, 0, 0.8),
        0 26px 60px rgba(0, 0, 0, 0.85);
}

.tr-sign::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: var(--cut-panel);
    background-image: var(--tex-scratch), var(--tex-grain);
    background-size: 500px, 200px;
    opacity: 0.2;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.tr-sign-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    text-align: center;
}

.tr-sign-eyebrow {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--tr-ash);
    padding-left: 0.4em;
}

.tr-sign-logo {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 44px rgba(255, 107, 26, 0.2));
}

.tr-sign-tagline {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: clamp(0.75rem, 1.5vw, 0.9375rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-bone);
    border-top: 1px solid rgba(237, 228, 214, 0.14);
    border-bottom: 1px solid rgba(237, 228, 214, 0.14);
    padding: 9px 0;
    width: 100%;
}

/* Sprayed tag over the sign's corner. */
.tr-sign-tag {
    position: absolute;
    z-index: 3;
    right: -6px;
    top: -18px;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    transform: rotate(-11deg);
    pointer-events: none;
}

/* Bracket the sign hangs from. */
.tr-sign-chain {
    position: absolute;
    top: -26px;
    width: 3px;
    height: 30px;
    background: linear-gradient(180deg, #3d332a, #16110d);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.tr-sign-chain--l { left: 16%; }
.tr-sign-chain--r { right: 16%; }

/* --- Hero copy column --- */
.tr-hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
}

.tr-hero-word {
    font-size: clamp(2.25rem, 5.6vw, 4.25rem);
    color: var(--tr-bone);
    margin: 0;
}

.tr-hero-word em {
    font-style: normal;
    color: var(--tr-ember);
    text-shadow:
        0 2px 0 #7d2f05,
        0 4px 0 rgba(0, 0, 0, 0.85),
        0 0 40px rgba(255, 107, 26, 0.45);
}

.tr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}


/* ==========================================================================
   12. RATE PLATES — punched metal, each on its own baseline
   ========================================================================== */

.tr-rates {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    margin-top: var(--sp-5);
}

.tr-rate {
    position: relative;
    flex: 1 1 140px;
    min-width: 132px;
    padding: 18px 16px 16px;
    text-align: center;
    background-color: #1a1510;
    background-image:
        var(--tex-bolts),
        linear-gradient(172deg, rgba(255, 255, 255, 0.07), transparent 40%, rgba(0, 0, 0, 0.4)),
        var(--tex-rib);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -3px 0 rgba(0, 0, 0, 0.75),
        0 12px 26px rgba(0, 0, 0, 0.6);
    clip-path: var(--cut-plate);
    transition: transform var(--dur) var(--ease-out);
}

/* Each plate is bolted on at a marginally different angle. */
.tr-rate:nth-child(1) { transform: rotate(-0.7deg); }
.tr-rate:nth-child(2) { transform: rotate(0.5deg); }
.tr-rate:nth-child(3) { transform: rotate(-0.35deg); }
.tr-rate:nth-child(4) { transform: rotate(0.8deg); }

.tr-rate:hover {
    transform: rotate(0deg) translateY(-4px);
}

/* Rust item art is dark and desaturated by design; on a dark plate it needs
   lifting or it reads as a smudge. */
.tr-rate-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin: 0 auto 9px;
    display: block;
    filter:
        brightness(1.22) saturate(1.12)
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));
}

.tr-rate-value {
    display: block;
    font-family: var(--font-stencil);
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 0.9;
    color: var(--tr-gold);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.9),
        0 0 26px rgba(255, 194, 74, 0.34);
}

.tr-rate-label {
    display: block;
    margin-top: 7px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tr-ash);
}


/* ==========================================================================
   13. CONNECT STRIP & POPULATION BELT
   ========================================================================== */

.tr-connect {
    position: relative;
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding: 0;
}

.tr-connect-plate {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    background-color: #120e0b;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%, rgba(0, 0, 0, 0.4)),
        var(--tex-rib);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.09),
        inset 0 -3px 0 rgba(0, 0, 0, 0.8),
        0 16px 40px rgba(0, 0, 0, 0.7);
    clip-path: var(--cut-plate);
    overflow: hidden;
}

.tr-connect-address {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tr-connect-ip {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: clamp(1.125rem, 3vw, 1.75rem);
    letter-spacing: 0.06em;
    color: var(--tr-bone);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.tr-connect-ip .tr-port {
    color: var(--tr-flame);
}

.tr-connect-actions {
    display: flex;
    align-items: stretch;
    border-left: 1px solid rgba(0, 0, 0, 0.6);
}

.tr-copy-btn,
.tr-connect-btn {
    clip-path: none;
    border-bottom: 0;
    border-radius: 0;
    padding: 0 clamp(1rem, 2.5vw, 1.75rem);
    min-height: 100%;
}

.tr-copy-btn {
    background-color: #241d16;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 50%),
        var(--tex-rib);
    color: var(--tr-bone);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.5);
}

.tr-copy-btn:hover {
    color: #fff;
    background-color: #2f261d;
}

.tr-copy-btn:active,
.tr-connect-btn:active {
    transform: none;
    filter: brightness(0.92);
}

.tr-copy-btn.is-copied {
    background-color: var(--tr-pine);
    color: #b9e4a8;
}

.tr-connect-btn {
    background-color: var(--tr-ember);
    color: #170d05;
}

/* Population reads as a belt of rounds feeding in. */
.tr-pop {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    flex-wrap: wrap;
}

.tr-pop-figure {
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.08em;
    color: var(--tr-bone);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tr-pop-figure span {
    color: var(--tr-ash);
    font-weight: 500;
}

.tr-belt {
    flex: 1 1 220px;
    min-width: 180px;
    height: 22px;
    position: relative;
    background: #0c0907;
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.08),
        inset 0 2px 8px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

.tr-belt-fill {
    position: absolute;
    inset: 2px 2px 2px 2px;
    right: auto;
    width: 0;
    max-width: calc(100% - 4px);
    background:
        linear-gradient(180deg, var(--tr-flame) 0%, var(--tr-ember) 55%, #b4430a 100%);
    box-shadow: 0 0 16px rgba(255, 107, 26, 0.55);
    transition: width 1.4s var(--ease-out);
}

/* Notches so the bar reads as discrete rounds, not a progress bar. */
.tr-belt::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg,
            transparent 0 9px,
            rgba(0, 0, 0, 0.75) 9px 12px);
    pointer-events: none;
}

.tr-pop-region {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tr-ash);
    white-space: nowrap;
}

.tr-pop-region .fi {
    box-shadow: 0 0 0 1px rgba(237, 228, 214, 0.2);
}

/* Console hint under the connect plate. */
.tr-connect-hint {
    margin-top: var(--sp-3);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--tr-ash);
}

.tr-kbd {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 2px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--tr-bone);
    background: #241d16;
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.16), 0 2px 0 rgba(0, 0, 0, 0.7);
}

/* Static server facts, shown in place of the population belt when no
   BattleMetrics ID has been supplied. Stamped straight onto the wall. */
.tr-specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-4);
    padding-left: 2px;
}

.tr-spec {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tr-ash);
}

.tr-spec i {
    font-size: 0.8125rem;
    color: var(--tr-oxide-lit, #8f5222);
}


/* ==========================================================================
   14. PERKS WALL — crate panels, each stamped with real Rust item art
   ========================================================================== */

.tr-section {
    position: relative;
    padding: clamp(3rem, 8vw, 6.5rem) 0;
}

/* The wall carries the same material as the panels, so a row that does not
   divide evenly ends in blank siding rather than a hole. */
.tr-perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    background-color: #16120e;
    background-image:
        linear-gradient(168deg, rgba(255, 255, 255, 0.045), transparent 45%, rgba(0, 0, 0, 0.34)),
        var(--tex-rib);
    box-shadow: 0 0 0 1px #241c14, 0 22px 50px rgba(0, 0, 0, 0.6);
}

/* One shared wall, panels welded edge to edge — not floating cards. */
.tr-perk {
    position: relative;
    padding: clamp(1.25rem, 2.6vw, 1.75rem);
    background-color: #16120e;
    background-image:
        linear-gradient(168deg, rgba(255, 255, 255, 0.045), transparent 45%, rgba(0, 0, 0, 0.34)),
        var(--tex-rib);
    border-right: 1px solid #241c14;
    border-bottom: 1px solid #241c14;
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    overflow: hidden;
    transition: background-color var(--dur) var(--ease-out);
}

.tr-perk::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--tex-grain);
    background-size: 200px;
    opacity: 0.1;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Rust bloom creeps in from the weld on hover. */
.tr-perk::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(70% 100% at 0% 100%, rgba(255, 107, 26, 0.16), transparent 62%);
    opacity: 0;
    transition: opacity 420ms var(--ease-out);
    pointer-events: none;
}

.tr-perk:hover::before {
    opacity: 1;
}

.tr-perk:hover {
    background-color: #1b1611;
}

.tr-perk-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: #0f0c09;
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.1),
        inset 0 2px 10px rgba(0, 0, 0, 0.85);
    clip-path: var(--cut-sm);
    position: relative;
    z-index: 1;
}

.tr-perk-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: brightness(1.18) saturate(1.1) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
    transition: transform 420ms var(--ease-out);
}

.tr-perk:hover .tr-perk-icon img {
    transform: scale(1.1) rotate(-5deg);
}

.tr-perk-body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.tr-perk-title {
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tr-bone);
    margin: 0 0 5px;
    line-height: 1.2;
}

.tr-perk-text {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--tr-ash);
    margin: 0;
}


/* ==========================================================================
   15. WIPE BOARD — a sheet of ply nailed to the wall
   ========================================================================== */

.tr-wipe {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background-color: #151109;
    background-image:
        var(--tex-bolts),
        linear-gradient(164deg, rgba(255, 255, 255, 0.05), transparent 38%, rgba(0, 0, 0, 0.44)),
        var(--tex-bloom),
        var(--tex-rib);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.08),
        inset 0 -3px 0 rgba(0, 0, 0, 0.8),
        0 20px 46px rgba(0, 0, 0, 0.7);
    clip-path: var(--cut-panel);
    overflow: hidden;
}

.tr-wipe-title {
    font-size: clamp(1.75rem, 4.4vw, 2.75rem);
    color: var(--tr-bone);
    margin: 0 0 var(--sp-4);
}

/* Sprayed into the empty siding above the heading. It must not sit over the
   schedule rows, which are the only thing on this board anyone came to read. */
.tr-wipe-spray {
    position: absolute;
    left: clamp(1.25rem, 3vw, 2.75rem);
    top: clamp(0.5rem, 1.6vw, 0.875rem);
    font-size: clamp(1.5rem, 3.4vw, 2.375rem);
    transform: rotate(-7deg);
    pointer-events: none;
    z-index: 2;
}

.tr-wipe-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(237, 228, 214, 0.1);
}

.tr-wipe-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 13px 16px;
    background: rgba(10, 8, 6, 0.62);
    flex-wrap: wrap;
}

.tr-wipe-row dt {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tr-ash);
    margin: 0;
}

.tr-wipe-row dd {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
    color: var(--tr-bone);
    margin: 0;
    text-align: right;
}

/* Countdown reads off a mechanical split-flap. */
.tr-countdown {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tr-count-cell {
    min-width: 62px;
    padding: 10px 8px;
    text-align: center;
    background: linear-gradient(180deg, #1d1811 0%, #0d0a07 52%, #16110c 53%, #0a0806 100%);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.1),
        0 6px 16px rgba(0, 0, 0, 0.7);
}

.tr-count-num {
    display: block;
    font-family: var(--font-stencil);
    font-size: 1.625rem;
    line-height: 1;
    color: var(--tr-gold);
    font-variant-numeric: tabular-nums;
}

.tr-count-unit {
    display: block;
    margin-top: 4px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tr-ash);
}

/* The moment the clock runs out the cells are replaced by this. */
.tr-count-live {
    font-family: var(--font-stencil);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    text-transform: uppercase;
    color: var(--tr-ember);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85), 0 0 26px rgba(255, 107, 26, 0.5);
}


/* ==========================================================================
   16. SHOP PLACARDS  (index server / navlink cards)
   ========================================================================== */

.serverSelection,
.productSelection {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem) clamp(1.75rem, 3.5vw, 2.5rem);
    background-color: transparent;
    background-size: cover;
    background-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    isolation: isolate;
    overflow: hidden;
    transition: transform 420ms var(--ease-out);
}

.serverSelection > *,
.productSelection > * {
    position: relative;
    z-index: 2;
}

/* The placard itself. */
.serverSelection::before,
.productSelection::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: var(--cut-panel);
    background-color: var(--content-background-color, #16120e);
    background-image:
        var(--tex-bolts),
        linear-gradient(166deg, rgba(255, 255, 255, 0.06) 0%, transparent 34%, rgba(0, 0, 0, 0.46) 100%),
        var(--tex-bloom),
        var(--tex-rib);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -3px 0 rgba(0, 0, 0, 0.8),
        inset 0 0 60px rgba(0, 0, 0, 0.6),
        0 18px 44px rgba(0, 0, 0, 0.7);
    transition: box-shadow 420ms var(--ease-out);
}

/* Grit, plus an ember wash that lights up on approach. */
.serverSelection::after,
.productSelection::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    clip-path: var(--cut-panel);
    background-image:
        radial-gradient(80% 60% at 50% 118%, rgba(255, 107, 26, 0.24), transparent 66%),
        var(--tex-scratch),
        var(--tex-grain);
    background-size: auto, 500px, 200px;
    opacity: 0.18;
    mix-blend-mode: overlay;
    transition: opacity 420ms var(--ease-out);
    pointer-events: none;
}

.serverSelection:hover,
.productSelection:hover {
    transform: translateY(-6px);
}

.serverSelection:hover::after,
.productSelection:hover::after {
    opacity: 0.44;
}

.serverSelection:hover::before,
.productSelection:hover::before {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -3px 0 rgba(0, 0, 0, 0.8),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 158, 44, 0.34),
        0 26px 56px rgba(0, 0, 0, 0.8);
}

.serverSelection a,
.productSelection a {
    display: block;
}

.serverTitle,
.productTitle {
    font-size: clamp(1.5rem, 3.4vw, 2.375rem);
    color: var(--content-heading-alt-color, #ede4d6);
    margin: 0;
    /* Stencil caps must never break mid-word — "RESOUR / CES" is not a word. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
}

.serverSubtitle,
.productSubtitle {
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    color: var(--content-heading-color, #ff9e2c);
    margin: 0 0 2px;
}

.serverDescription,
.productDescription {
    margin-top: var(--sp-3);
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--content-text-alt-color, #a2937f);
}

.package-img {
    max-height: 130px;
    width: auto;
    margin: 0 auto var(--sp-3);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.85));
}

/* Stamped item icon on a placard. */
.tr-placard-stamp {
    width: 68px;
    height: 68px;
    margin: 0 auto var(--sp-4);
    display: grid;
    place-items: center;
    background: #0f0c09;
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.1),
        inset 0 2px 12px rgba(0, 0, 0, 0.9);
    clip-path: var(--cut-sm);
}

.tr-placard-stamp img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: brightness(1.18) saturate(1.1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
}

.serverSelectionButton,
.productSelectionButton {
    margin-top: var(--sp-5);
}

/* Live population and region badges welded to the placard corners. */
.serverPopulation,
.serverLocation {
    position: absolute;
    top: 16px;
    z-index: 3;
    font-family: var(--font-sign);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--server-selection-battlemetrics-text-color, #ded2bf);
}

.serverPopulation {
    right: 16px;
    font-size: 0.75rem;
    padding: 6px 10px;
    background: rgba(10, 8, 6, 0.85);
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.12);
    font-variant-numeric: tabular-nums;
}

.serverPopulation i {
    font-size: 0.6875rem;
    color: var(--server-selection-battlemetrics-icon-color, #ff6b1a);
    margin-right: 4px;
}

.serverLocation {
    left: 16px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: rgba(10, 8, 6, 0.85);
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.12);
    font-size: 1.25rem;
}


/* ==========================================================================
   17. TAGS
   ========================================================================== */

.productTag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    padding: 9px 14px 9px 12px;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background-color: var(--button-background-color, #ff6b1a);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 60%);
    color: var(--button-text-color, #140c05);
    border-radius: 0;
    border: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.productTagPopular {
    background-color: var(--tag-background-color-mostpopular, #ffc24a);
    color: var(--tag-text-color-mostpopular, #140c05);
}

.productTagNew {
    background-color: var(--tag-background-color-new, #ff6b1a);
    color: var(--tag-text-color-new, #140c05);
}

/* Sale gets hazard tape — the only thing that earns it. */
.productTagSale {
    left: auto;
    right: 0;
    background-color: var(--tag-background-color-sale, #a81e12);
    color: var(--tag-text-color-sale, #fff);
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
    padding: 9px 12px 9px 16px;
}

.productPageTagContainer {
    width: 100%;
    margin-top: 6px;
}

.productPageTag {
    display: inline-block;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tr-bone);
    background: var(--tag-background-color-sale, #a81e12);
    padding: 6px 12px;
    clip-path: var(--cut-sm);
}


/* ==========================================================================
   18. PRICES
   ========================================================================== */

.productPriceContainer {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-top: var(--sp-4);
    margin-bottom: 0;
}

.productPriceContainer.text-start,
.productPriceContainer.md\:text-end {
    justify-content: flex-end;
}

.productPrice {
    position: relative;
    display: inline-block;
    font-family: var(--font-stencil);
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1;
    letter-spacing: 0;
    color: var(--content-price-color, #ffc24a);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.9),
        0 0 30px rgba(255, 194, 74, 0.28);
}

/* Struck through by the font's own metrics rather than an absolutely placed
   bar, which drifted off the glyphs at stencil sizes. */
.productPriceDiscounted {
    color: var(--content-price-alt-color, #8a7a66);
    font-size: 0.62em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
    margin-right: 4px;
    text-decoration: line-through;
    text-decoration-color: var(--tr-blood);
    text-decoration-thickness: 3px;
}

.productPriceDiscountedCross {
    display: none;
}

.storeCurrency {
    display: inline-block;
    position: relative;
    top: -0.9em;
    margin-left: 4px;
    padding: 3px 6px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    background: rgba(237, 228, 214, 0.12);
    color: var(--tr-ash);
    text-shadow: none;
    vertical-align: super;
}

.productRecurringPeriod {
    margin-top: 6px;
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--content-text-alt-color, #a2937f);
}

.subscriptionRenewal {
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-ash);
}

.subscriptionRenewal i {
    margin-right: 5px;
    color: var(--content-icon, #ff6b1a);
}


/* ==========================================================================
   19. CONTENT PANELS  (product / cart / account)
   ========================================================================== */

.pageSectionContainer {
    margin-bottom: clamp(3rem, 8vw, 6rem);
}

.pageSection,
.productSection {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
    background-color: transparent;
    background-size: cover;
    background-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    isolation: isolate;
    margin-bottom: 0;
}

.pageSection > *,
.productSection > * {
    position: relative;
    z-index: 2;
}

.pageSection::before,
.productSection::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    clip-path: var(--cut-panel);
    background-color: var(--content-background-color, #16120e);
    background-image:
        var(--tex-bolts),
        linear-gradient(170deg, rgba(255, 255, 255, 0.05) 0%, transparent 32%, rgba(0, 0, 0, 0.44) 100%),
        var(--tex-bloom),
        var(--tex-rib);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -3px 0 rgba(0, 0, 0, 0.8),
        inset 0 0 70px rgba(0, 0, 0, 0.6),
        0 18px 44px rgba(0, 0, 0, 0.7);
}

.pageSection::after,
.productSection::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    clip-path: var(--cut-panel);
    background-image: var(--tex-scratch), var(--tex-grain);
    background-size: 500px, 200px;
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.productSectionHeading {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    color: var(--content-heading-alt-color, #ede4d6);
    margin-bottom: var(--sp-2);
}

.productSectionHeading i {
    font-size: 0.72em;
    color: var(--content-icon, #ff6b1a);
    filter: drop-shadow(0 0 12px rgba(255, 107, 26, 0.5));
}

.productSectionDescriptionContainer {
    margin-bottom: var(--sp-6);
    color: var(--content-text-color, #ded2bf);
    max-width: 72ch;
}

.productSectionDescriptionContainer p {
    margin: 0 0 0.85em;
}

.productSectionDescriptionContainer h1,
.productSectionDescriptionContainer h2,
.productSectionDescriptionContainer h3 {
    font-family: var(--font-sign);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tr-bone);
    margin: 1.4em 0 0.4em;
}

.productSectionDescriptionContainer ul {
    padding-left: 1.1em;
    list-style: none;
}

.productSectionDescriptionContainer ul li {
    position: relative;
    padding-left: 0.35em;
    margin-bottom: 0.35em;
}

.productSectionDescriptionContainer ul li::before {
    content: "";
    position: absolute;
    left: -0.85em;
    top: 0.62em;
    width: 6px;
    height: 6px;
    background: var(--tr-ember);
    transform: rotate(45deg);
}

/* --- Recessed trays: items, features, redeem, line items --- */
.productSectionItemsContainer,
.productSectionFeatureContainer,
.pageSectionFeatureContainer,
.productItemListContainer,
.productHowToRedeemContainer,
.cartCheckoutLineContainer {
    position: relative;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background-color: var(--content-lineitem-background, #100d0a);
    border: 0;
    border-radius: 0;
    clip-path: var(--cut-sm);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.08),
        inset 0 3px 14px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    color: var(--content-lineitem-text, #ded2bf);
}

.productSectionItemsContainer {
    min-height: 86px;
    aspect-ratio: 1;
    padding: 8px;
    display: grid;
    place-items: center;
    transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.productSectionItemsContainer:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 158, 44, 0.4),
        inset 0 3px 14px rgba(0, 0, 0, 0.8);
}

.productSectionFeatureContainer,
.pageSectionFeatureContainer {
    margin-bottom: 10px;
}

.productSectionItemsDisplay,
.productSectionFeatureDisplay,
.pageSectionFeatureDisplay,
.productItemDisplay {
    position: relative;
    z-index: 2;
}

/* The stock template ships a separate background div inside each tray. It now
   carries the corrugation instead of a tiled image. */
.productSectionItemsBackground,
.productSectionFeatureBackground,
.pageSectionFeatureBackground,
.productItemListBackground {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent;
    background-image: var(--tex-rib), var(--tex-grain);
    background-size: auto, 200px;
    opacity: 0.5;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.productItemListContainer {
    text-align: center;
    padding: 14px 10px;
}

.productItemDisplay,
.productSectionItemsDisplay {
    padding: 6px 10px;
}

.productItemAmount {
    display: block;
    margin-top: 5px;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--content-lineitem-text, #ded2bf);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}

.productItemDisplay img,
.productSectionItemsDisplay img {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.9));
    transition: transform var(--dur) var(--ease-out);
}

.productItemDisplay:hover img,
.productSectionItemsDisplay:hover img {
    transform: scale(1.12) rotate(-4deg);
}

/* --- Features --- */
.productSectionFeatureDisplay {
    align-items: flex-start;
}

.productFeatureImage {
    width: 54px;
    height: 54px;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    border: 0;
    clip-path: var(--cut-sm);
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.14);
}

.productFeatureName {
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--content-lineitem-text, #ded2bf);
    line-height: 1.25;
}

.productFeatureDescription {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--content-lineitem-alt-text, #a2937f);
}

.productFeaturesArrow,
.toggleArrow {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-left: 10px;
    background: rgba(237, 228, 214, 0.06);
    border: 0;
    color: var(--tr-ash);
    font-size: 0.75rem;
    cursor: pointer;
    clip-path: var(--cut-sm);
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.productFeaturesArrow:hover,
.toggleArrow:hover {
    background: rgba(255, 107, 26, 0.2);
    color: var(--tr-flame);
}

.productDetails {
    padding: 12px;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.08);
    border: 0;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--content-lineitem-alt-text, #a2937f);
}

.productFeatureDetails {
    margin-bottom: 4px;
}

.productFeatureCommand {
    width: 100%;
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--content-lineitem-text, #ded2bf);
}

.productFeatureCommandBordered {
    border-top: 1px solid rgba(237, 228, 214, 0.1);
    padding-top: 7px;
    margin-top: 7px;
}

.productFeatureCommandTitle {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tr-flame);
}

/* --- How to redeem / chat commands --- */
.productHowToRedeemContainer {
    padding: 16px;
    margin-bottom: var(--sp-4);
}

.productHowToRedeem {
    color: var(--content-lineitem-text, #ded2bf);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.productHowToRedeem strong {
    color: var(--content-lineitem-text-strong, #fff);
}

.productHowToRedeem table {
    width: 100%;
}

.productHowToRedeem th {
    text-align: left;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-flame);
    padding: 0 0 6px;
}

.productHowToRedeem td {
    vertical-align: top;
    padding-bottom: 6px;
}

.productHowToRedeem td strong {
    text-transform: uppercase;
    font-family: var(--font-sign);
    letter-spacing: 0.06em;
}

.productHowToRedeem ol,
.productHowToRedeem ul {
    padding-left: 1.2em;
    margin: 0;
}

.productHowToRedeem li {
    margin-bottom: 0.4em;
}

.productHowToRedeem code {
    font-family: var(--font-sign);
    font-weight: 600;
    background: rgba(255, 107, 26, 0.14);
    color: var(--tr-flame);
    padding: 1px 6px;
}


/* ==========================================================================
   20. GIFT PANEL
   ========================================================================== */

#giftActions {
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background-color: #1a1510;
    background-image: var(--tex-rib);
    background-blend-mode: overlay;
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.1),
        inset 0 -3px 0 rgba(0, 0, 0, 0.8);
    clip-path: var(--cut-sm);
    color: var(--tr-bone);
}

.giftActionsTitle {
    font-family: var(--font-stencil);
    font-size: 1.375rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--tr-gold);
    margin-right: 4px;
    white-space: nowrap;
}

#giftActions .giftActionInput,
.giftActionInput {
    flex: 1;
    min-width: 0;
    background: #0c0907;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.14), inset 0 2px 8px rgba(0, 0, 0, 0.9);
    border-radius: 0 !important;
    padding: 11px 14px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: var(--tr-bone);
    text-transform: none;
    margin-right: 0;
}

.giftActionInput::placeholder {
    color: #7c6f5e;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
}

.add-gift-btn,
.close-gift {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 0;
    cursor: pointer;
    clip-path: var(--cut-sm);
    transition: filter var(--dur) var(--ease-out), transform 120ms var(--ease-out);
}

.add-gift-btn {
    background: var(--tr-pine);
    border-bottom: 4px solid #131a15;
}

.close-gift {
    background: #2a201a;
    border-bottom: 4px solid #120d0a;
}

.add-gift-btn:active,
.close-gift:active {
    transform: translateY(3px);
    border-bottom-width: 1px;
}

#giftActions #purchaseFromGift i {
    font-size: 1.125rem;
    color: #b9e4a8;
    margin: 0;
}

#giftActions #closeGift i {
    font-size: 1.125rem;
    color: var(--tr-ash);
    margin: 0;
}

.productFloatingBottomGiftLink {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-bone);
}

.productFloatingBottomGiftLink i {
    color: var(--tr-gold);
    margin-right: 6px;
}


/* ==========================================================================
   21. TABS / PAGE LINKS
   ========================================================================== */

.pageLinksContainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-3);
}

.pageLinks {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pageLinksLeft { padding-left: 14px; }
.pageLinksRight { margin-left: auto; padding-right: 14px; }

.pageLinks li { display: inline-block; }

.pageLinks li a {
    display: block;
    padding: 13px 22px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--content-tab-text-color, #c9bba6);
    background-color: var(--content-tab-background-color, #221a14);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 60%),
        var(--tex-rib);
    background-blend-mode: normal, overlay;
    border-radius: 0;
    clip-path: var(--cut-tab);
    transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.pageLinks li a:hover {
    color: var(--tr-bone);
    background-color: #2d241b;
}

.pageLinks li a i {
    font-size: 0.75rem;
    margin-right: 5px;
    opacity: 0.7;
}

.pageLinks li a.selectedPageLink {
    color: var(--tr-bone);
    background-color: var(--content-background-color, #16120e);
    box-shadow: inset 0 3px 0 var(--tr-ember);
}

.pageLinks li a.selectedPageLink i {
    color: var(--content-icon, #ff6b1a);
    opacity: 1;
}

.pageLinks li a.gobackPageLink,
a.pageLinksGoBackMobile {
    background-color: #2a221a;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 60%);
    color: var(--tr-bone);
}

.pageLinks li a.gobackPageLink:hover,
a.pageLinksGoBackMobile:hover {
    background-color: #3a2f22;
    color: #fff;
}

.pageLinkMobileTitle,
.pageLinksOverlayClose {
    display: none !important;
}

.pageLinksDropdown {
    display: none;
}

a.pageLinksGoBackMobile {
    display: none;
    padding: 11px 16px;
    margin-left: 14px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    clip-path: var(--cut-tab);
}

a.pageLinksGoBackMobile i { margin-right: 5px; }


/* ==========================================================================
   22. LINE ITEMS  (cart, orders, subscriptions)
   ========================================================================== */

.pageLineTitles {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tr-ash);
    padding-bottom: 6px;
}

.pageLineItemTitle {
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--content-lineitem-text, #ded2bf);
    line-height: 1.25;
}

.pageLineItemType,
.pageLineItemSubtitle {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--content-lineitem-alt-text, #a2937f);
}

.pageLineItemTransactionID {
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7c6f5e;
}

.pageLineItemDescription {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--content-lineitem-alt-text, #a2937f);
}

.pageLineItemPrice {
    font-family: var(--font-stencil);
    font-size: 1.375rem;
    line-height: 1;
    text-transform: uppercase;
    color: var(--content-lineitem-highlight-text, #ff9e2c);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85);
}

.pageLineItemPriceAlt {
    color: var(--content-lineitem-text, #ded2bf);
}

.pageLineItemPriceCartTotal {
    font-size: 1.875rem;
    color: var(--tr-gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9), 0 0 28px rgba(255, 194, 74, 0.3);
}

.pageLineItemCurrency {
    background: transparent;
    color: var(--content-lineitem-alt-text, #a2937f);
    padding: 0;
    margin-left: 3px;
    top: -0.7em;
    opacity: 0.8;
}

.pageLineItemInterval {
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--content-lineitem-alt-text, #a2937f);
}

.pageLineItemStatusActive {
    color: #8fc47a;
}

.pageLineItemStatusInactive {
    color: var(--content-lineitem-alt-highlight-text, #a81e12);
}

.subscriptionCanceled {
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--content-lineitem-alt-highlight-text, #a81e12);
}

.newSubscriptionMessage {
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--content-lineitem-alt-text, #a2937f);
    padding-right: 10px;
}

.newSubscriptionMessageIcon {
    font-size: 1.5rem;
    color: var(--content-lineitem-highlight-text, #ff9e2c);
}

/* Quantity stepper as a machined selector. */
.pageLineItemQuantity {
    font-family: var(--font-sign);
    font-weight: 700;
    color: var(--content-lineitem-text, #ded2bf);
}

.pageLineItemQuantitySelectionContainer a {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: rgba(237, 228, 214, 0.07);
    clip-path: var(--cut-sm);
    font-size: 0.875rem;
    transition: background var(--dur) var(--ease-out);
}

.pageLineItemQuantitySelectionUp {
    color: var(--content-lineitem-highlight-text, #ff9e2c);
}

.pageLineItemQuantitySelectionDown {
    color: var(--tr-ash);
}

.pageLineItemQuantitySelectionContainer a:hover {
    background: rgba(255, 107, 26, 0.22);
}

.pageLineItemQuantitySelectionDisabled,
.pageLineItemQuantitySelectionDisabled:hover {
    color: #4a4238;
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(237, 228, 214, 0.04);
}

.pageLineItemQuantityInputContainer {
    min-width: 46px;
    text-align: center;
}

.pageLineItemInputPrepend {
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    color: var(--tr-bone);
    font-variant-numeric: tabular-nums;
}

.pageLineItemInput {
    background: transparent;
    max-width: 40px;
    border: 0;
    color: var(--tr-bone);
}

.nothingFound {
    font-size: clamp(1.375rem, 3vw, 2rem);
    color: var(--tr-bone);
    margin-bottom: var(--sp-5);
}

.no-orders-message {
    padding: var(--sp-6) 0;
    text-align: center;
}

.cartEmptyImage {
    width: 110px;
    height: auto;
    margin-bottom: var(--sp-4);
    opacity: 0.7;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.85)) grayscale(0.3);
}

.icon-checkout {
    color: #8fc47a !important;
}

.paymentOptions {
    text-align: center;
    margin-top: var(--sp-4);
    font-size: 1.375rem;
    color: #6d6152;
}

.paymentOptions li {
    display: inline;
    margin: 0 2px;
}


/* ==========================================================================
   23. FLOATING PRODUCT BAR
   ========================================================================== */

.productFloatingBottom {
    display: none;
}


/* ==========================================================================
   24. OVERLAYS
   ========================================================================== */

#cartPopupOverlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 5, 0.88);
    backdrop-filter: blur(10px);
    z-index: 40;
}

#cartPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 41;
    padding: var(--sp-6) var(--sp-7);
    background: #17120d;
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.12), 0 40px 90px rgba(0, 0, 0, 0.9);
    clip-path: var(--cut-plate);
}

.popupIcon {
    font-size: 2.75rem;
    color: var(--tr-ember);
    animation: tr-pulse 1s ease-in-out infinite;
}

@keyframes tr-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(255, 107, 26, 0.5); }
    50%      { opacity: 0.6; text-shadow: 0 0 30px rgba(255, 107, 26, 0.9); }
}

.popupTitle {
    margin-top: var(--sp-3);
    font-size: 1.375rem;
    color: var(--tr-bone);
}

.popupDescription {
    margin-top: 6px;
    font-size: 0.875rem;
    color: var(--tr-ash);
}

#notification-alert {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    left: auto;
    z-index: 45;
    max-width: min(400px, calc(100vw - 3rem));
    padding: 15px 20px !important;
    font-family: var(--font-sign) !important;
    font-weight: 600;
    font-size: 0.9375rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--tr-blood) !important;
    border: 0 !important;
    border-bottom: 4px solid #5c0f08 !important;
    border-radius: 0;
    clip-path: var(--cut-sm);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85) !important;
    animation: tr-slam 420ms var(--ease-out) both !important;
    transition: opacity 600ms var(--ease-out);
}

@keyframes tr-slam {
    from { opacity: 0; transform: translateY(26px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.error-msg,
.success-msg {
    padding: 13px 18px;
    margin: 0 0 var(--sp-4);
    font-family: var(--font-sign);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 0;
    clip-path: var(--cut-sm);
}

.error-msg { background: var(--tr-blood); }
.success-msg { background: var(--tr-pine); color: #c6e8b6; }


/* ==========================================================================
   25. CLOSING CALL TO ACTION
   ========================================================================== */

.tr-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
    background-color: #14100b;
    background-image:
        linear-gradient(172deg, rgba(255, 255, 255, 0.05), transparent 34%, rgba(0, 0, 0, 0.5)),
        var(--tex-bloom-hot),
        var(--tex-corrugate);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.08),
        0 22px 50px rgba(0, 0, 0, 0.7);
    clip-path: var(--cut-panel);
    text-align: center;
}

.tr-cta-title {
    font-size: clamp(2rem, 6vw, 4rem);
    color: var(--tr-bone);
    margin: 0 0 var(--sp-4);
}

.tr-cta-text {
    max-width: 56ch;
    margin: 0 auto var(--sp-6);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--tr-ash);
}

.tr-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

/* Ordnance laid along the hazard band. */
.tr-ordnance {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(1rem, 4vw, 2.75rem);
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding-top: var(--sp-5);
}

.tr-ordnance::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
    background-image: var(--tex-hazard);
    background-size: 28px 28px;
    opacity: 0.7;
}

.tr-ordnance img {
    width: clamp(34px, 5vw, 54px);
    height: auto;
    opacity: 0.5;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9)) saturate(0.7);
    animation: tr-bob 5s ease-in-out infinite alternate;
}

.tr-ordnance img:nth-child(2n) { animation-delay: -1.3s; }
.tr-ordnance img:nth-child(3n) { animation-delay: -2.6s; }
.tr-ordnance img:nth-child(4n) { animation-delay: -3.9s; }

@keyframes tr-bob {
    from { transform: translateY(0) rotate(-3deg); }
    to   { transform: translateY(-9px) rotate(3deg); }
}


/* ==========================================================================
   26. FOOTER
   ========================================================================== */

footer {
    position: relative;
    z-index: 2;
    padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3.5rem, 7vw, 5rem);
    background-color: var(--footer-background-color, #0d0a08);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--footer-text-color, #ded2bf);
    border-top: 1px solid #2a2118;
}

footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(180deg, rgba(10, 8, 6, 0.55), rgba(10, 8, 6, 0.9)),
        var(--tex-bloom),
        var(--tex-corrugate);
    background-size: auto, cover, auto;
    pointer-events: none;
}

footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    background-image: var(--tex-hazard);
    background-size: 24px 24px;
    opacity: 0.55;
}

footer > * {
    position: relative;
    z-index: 1;
}

.footer-links a {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--footer-link-color, #c9bba6);
    transition: color var(--dur) var(--ease-out);
}

.footer-links a:hover {
    color: var(--footer-link-hover-color, #fff);
}

.footer-links a i {
    color: var(--footer-link-icon-color, #ff6b1a);
    transition: color var(--dur) var(--ease-out);
    margin-right: 5px;
}

.footer-links a:hover i {
    color: var(--footer-link-icon-hover-color, #ffc24a);
}

/* Socials as bolted-on plates. */
a.social-media-item {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 1.0625rem;
    background: #1a1510;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 60%);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.1),
        inset 0 -2px 0 rgba(0, 0, 0, 0.7);
    clip-path: var(--cut-sm);
    transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

a.social-media-item i { margin: 0; }

a.social-media-item:hover {
    transform: translateY(-3px);
    background-color: #2a2118;
}

a.social-media-item.discord:hover { background-color: #4b52a8; }
a.social-media-item.twitch:hover { background-color: #6441a5; }
a.social-media-item.youtube:hover { background-color: #a8271f; }
a.social-media-item.twitter:hover { background-color: #1b1b1b; }
a.social-media-item.instagram:hover { background-color: #a83a72; }
a.social-media-item.facebook:hover { background-color: #2d4373; }
a.social-media-item.tiktok:hover { background-color: #1b1b1b; }

a.social-media-item:hover i { color: #fff !important; }

.disclaimer-information {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--footer-disclaimer-text-color, #a2937f);
    max-width: 74ch;
    margin: 0;
}

.disclaimer-information i {
    color: var(--footer-disclaimer-icon-color, #e0ba45);
    margin-right: 5px;
}

.disclaimerTitle {
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tr-hazard);
}

.footer-copyright span {
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--footer-copyright-text-color, #8a7a66);
}

.bottombar {
    position: relative;
    z-index: 2;
    padding: 14px 0;
    background-color: var(--footer-bottombar-background-color, #0a0806);
    border-top: 1px solid var(--footer-bottombar-border-color, #2a2118);
    row-gap: var(--sp-3);
}

#paynowBottomContainer {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 14px 0 16px;
    background: #100b16;
    border-top: 1px solid #2c2140;
}

.paynow-disclaimer {
    font-size: 0.75rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
    color: #8a819c;
    text-align: left;
    max-width: 78ch;
}

.paynow-logo {
    max-width: 96px;
    min-height: 42px;
    fill: #cfc6de;
    opacity: 0.75;
    transition: opacity var(--dur) var(--ease-out);
}

a:hover .paynow-logo {
    opacity: 1;
}


/* ==========================================================================
   27. MODULES  (payment goal, text box, recent purchases)
   ========================================================================== */

.card.module {
    position: relative;
    flex: 1;
    min-width: 260px;
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    background-color: rgba(16, 13, 10, 0.72);
    background-image: var(--tex-rib);
    background-blend-mode: overlay;
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.09),
        inset 0 -3px 0 rgba(0, 0, 0, 0.7);
    clip-path: var(--cut-sm);
    overflow: hidden;
}

.module-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(237, 228, 214, 0.1);
}

.module-title {
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tr-bone);
    margin: 0;
}

.module-header p {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tr-ash);
    margin: 0;
}

.module-body {
    font-size: 0.9375rem;
    color: var(--tr-ash);
}

.module-body a {
    color: var(--tr-flame);
    text-decoration: underline;
    text-decoration-color: rgba(255, 158, 44, 0.4);
}

.goal-current {
    font-family: var(--font-stencil);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--tr-gold);
    margin-bottom: 10px;
}

.payment-goal {
    height: 16px;
    background: #0c0907;
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.08), inset 0 2px 8px rgba(0, 0, 0, 0.9);
    overflow: hidden;
    position: relative;
}

.payment-goal .progress-bar {
    height: 100%;
    background: linear-gradient(180deg, var(--tr-flame), var(--tr-ember) 60%, #b4430a);
    box-shadow: 0 0 14px rgba(255, 107, 26, 0.5);
}

.payment-goal::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(0, 0, 0, 0.7) 8px 10px);
    pointer-events: none;
}

.payment-goal-data,
.payment-goal-display {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
}

.payment-max,
.payment-percentage,
.goal-complete {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-ash);
}

.payment-percentage {
    color: var(--tr-flame);
}

/* Recent purchase toast. */
.sales-list-item {
    position: fixed;
    right: var(--sp-5);
    bottom: -180px;
    width: 316px;
    max-width: calc(100vw - 2.5rem);
    z-index: 30;
    transition: bottom 560ms var(--ease-out);
}

.sales-list-item.show {
    bottom: var(--sp-5);
}

.sales-list-item .popup-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #17120d;
    border: 0;
    border-radius: 0;
    clip-path: var(--cut-sm);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.12),
        0 24px 60px rgba(0, 0, 0, 0.85);
}

.sales-list-item .popup-icon {
    flex-shrink: 0;
    margin: 0;
    font-size: 1.5rem;
    color: var(--content-icon, #ff6b1a);
    animation: none;
}

.sales-list-item .popup-details {
    flex-grow: 1;
    min-width: 0;
}

.sales-list-item-header {
    display: block;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tr-flame);
    padding-bottom: 5px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(237, 228, 214, 0.1);
}

.sales-list-message {
    display: block;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--tr-bone);
    margin-bottom: 5px;
}

.sale-product-name {
    color: var(--tr-gold);
}

.sales-list-time {
    display: block;
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7c6f5e;
}

.sale-avatar {
    border: 0 !important;
    box-shadow: 0 0 0 2px rgba(237, 228, 214, 0.18);
}

.sales-list-item .progress-bar-container {
    height: 3px;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.sales-list-item .progress-bar-container .progress-bar {
    height: 3px;
    background: var(--tr-ember);
    width: 0;
}


/* ==========================================================================
   28. CUSTOM PAGES & PROSE
   ========================================================================== */

.home-content {
    display: none;
}

.pageSection .prose,
.productSectionDescriptionContainer .prose {
    color: var(--content-text-color, #ded2bf);
}

.pageSection a:not(.btn):not(.pageLinks a),
.tr-rich a {
    color: var(--tr-flame);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 158, 44, 0.4);
    transition: text-decoration-color var(--dur) var(--ease-out);
}

.pageSection a:not(.btn):hover,
.tr-rich a:hover {
    text-decoration-color: var(--tr-flame);
}

.tr-rich h1,
.tr-rich h2,
.tr-rich h3 {
    font-family: var(--font-sign);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tr-bone);
    margin: 1.6em 0 0.45em;
}

.tr-rich h1:first-child,
.tr-rich h2:first-child {
    margin-top: 0;
}

.tr-rich p {
    margin: 0 0 0.9em;
    max-width: 72ch;
}

.tr-rich ul,
.tr-rich ol {
    padding-left: 1.3em;
    margin: 0 0 1em;
    max-width: 72ch;
}

.tr-rich li {
    margin-bottom: 0.35em;
}

/* Auth / username form. */
.tr-auth-form input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    background: #0c0907;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.14), inset 0 2px 8px rgba(0, 0, 0, 0.9);
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--tr-bone);
}

.tr-auth-form input[type="text"]::placeholder {
    color: #7c6f5e;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}


/* ==========================================================================
   29. REVEAL & MOTION ORCHESTRATION
   ========================================================================== */

/* Content is visible by default. JS opts in to the settle animation only once
   it has confirmed it can also finish it. */
html.tr-js .tr-reveal {
    opacity: 0;
    transform: translateY(22px) rotate(0.4deg);
    transition:
        opacity 620ms var(--ease-out),
        transform 720ms var(--ease-out);
}

html.tr-js .tr-reveal.is-in {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

html.tr-js .tr-reveal[data-tr-delay="1"] { transition-delay: 80ms; }
html.tr-js .tr-reveal[data-tr-delay="2"] { transition-delay: 160ms; }
html.tr-js .tr-reveal[data-tr-delay="3"] { transition-delay: 240ms; }
html.tr-js .tr-reveal[data-tr-delay="4"] { transition-delay: 320ms; }
html.tr-js .tr-reveal[data-tr-delay="5"] { transition-delay: 400ms; }


/* ==========================================================================
   30. SHELL UTILITIES
   ========================================================================== */

.tr-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 120;
    padding: 13px 20px;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #140c05;
    background: var(--tr-ember);
    clip-path: var(--cut-sm);
}

.tr-skip:focus {
    left: 14px;
    top: 14px;
}

.tr-shell {
    position: relative;
    z-index: 1;
}

.tr-main {
    display: block;
    position: relative;
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

/* The store name stencilled straight onto the siding, twice, cropped by the
   hero frame. Deliberately almost invisible: it is the wall, not a headline. */
.tr-wall-text {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.tr-wall-text span {
    font-family: var(--font-stencil);
    font-size: clamp(5rem, 17vw, 14rem);
    line-height: 0.78;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(237, 228, 214, 0.022);
    -webkit-text-stroke: 1px rgba(237, 228, 214, 0.045);
    transform: translateX(-5%);
}

.tr-wall-text span:last-child {
    align-self: flex-end;
    transform: translateX(7%);
}

.tr-hero-eyebrow-label {
    align-self: flex-start;
    letter-spacing: 0.34em;
    color: var(--tr-flame);
}

/* The stencil lockup standing in for a logo image, hung on the sign. */
.tr-sign-wordmark {
    font-size: clamp(1.75rem, 5vw, 3.25rem);
    align-items: center;
    text-align: center;
}


/* ==========================================================================
   31. CROSS-PAGE PIECES  (grids, breadcrumbs, empty states)
   ========================================================================== */

.tr-section--tight {
    padding-top: 0;
}

.tr-section-foot {
    margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* The wall of placards. Wide variant is for category pages, where kits carry
   more content per placard and need the extra column width. */
.tr-placards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.tr-placards--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}

.tr-placard-link {
    display: block;
    width: 100%;
}

/* Context strip above a category grid. */
.tr-crumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid rgba(237, 228, 214, 0.09);
}

.tr-crumb,
.tr-crumb-count {
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tr-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tr-ash);
    transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}

.tr-crumb:hover {
    color: var(--tr-flame);
    gap: 12px;
}

.tr-crumb-count {
    color: var(--tr-bone);
    padding: 5px 11px;
    background: rgba(237, 228, 214, 0.055);
    box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.1);
    font-variant-numeric: tabular-nums;
}

/* Nothing here yet. Honest, not apologetic. */
.tr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(2.5rem, 7vw, 5rem) var(--sp-4);
}

.tr-empty .tr-lede {
    max-width: 46ch;
    margin: var(--sp-3) 0 0;
}

.tr-empty--cart {
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

.cartEmptyImage {
    max-height: 190px;
    width: auto;
    margin-bottom: var(--sp-5);
    opacity: 0.85;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.9));
}


/* ==========================================================================
   32. BUY CONTROLS
   ========================================================================== */

.tr-buy-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.tr-actions-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.tr-actions-row--floating {
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
}

.tr-btn-sm {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    padding: 11px 15px;
    border-bottom-width: 3px;
}

#gameServerDropdownFloating {
    width: 100%;
    max-width: 190px;
    background: transparent;
    border: 0;
    appearance: none;
    color: var(--tr-bone);
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 15px 36px 15px 16px;
    cursor: pointer;
}

#gameServerDropdownFloating option {
    background: #17120d;
    color: var(--tr-bone);
}

/* Small print under the buy buttons. */
.tr-renewal-note,
.tr-delivery-note,
.tr-price-note,
.tr-checkout-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-sign);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tr-ash);
}

.tr-renewal-note i,
.tr-delivery-note i,
.tr-checkout-note i {
    color: var(--tr-flame);
    font-size: 0.8125rem;
}

.tr-renewal-note--floating {
    justify-content: flex-end;
    margin-top: 8px;
}

.tr-checkout-note {
    margin-top: var(--sp-4);
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.8125rem;
    align-items: flex-start;
}

.tr-checkout-note i {
    margin-top: 3px;
}

/* Copy confirmed. The button briefly stops being a button and becomes a receipt. */
.tr-copied {
    background-color: var(--tr-pine) !important;
    border-bottom-color: #101812 !important;
    color: #d6efd9 !important;
}

.tr-copied::before {
    display: none;
}


/* ==========================================================================
   33. PRODUCT PAGE LAYOUT
   ========================================================================== */

.productPage {
    position: relative;
}

/* Masthead: the kit on the left, the transaction on the right. */
.tr-product-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.tr-product-identity {
    min-width: 0;
}

.tr-product-buy {
    min-width: 0;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: rgba(9, 7, 5, 0.55);
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.08),
        inset 0 -3px 0 rgba(0, 0, 0, 0.7);
    clip-path: var(--cut-plate);
}

.tr-product-title-block {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    flex-wrap: wrap;
}

.tr-product-art {
    flex-shrink: 0;
    width: clamp(96px, 14vw, 168px);
    display: grid;
    place-items: center;
    padding: var(--sp-3);
    background: #0f0c09;
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.1),
        inset 0 3px 16px rgba(0, 0, 0, 0.9);
    clip-path: var(--cut-sm);
}

.tr-product-art .package-img {
    margin: 0;
    max-height: 132px;
}

.tr-product-words {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tr-product-words .productTitle {
    font-size: clamp(1.875rem, 4.6vw, 3.25rem);
}

.tr-product-wordmark {
    max-width: 420px;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.9));
}

/* Stock and billing state, stamped rather than badged. */
.tr-stock-flag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--sp-2);
    padding: 7px 12px;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tr-hazard);
    background: rgba(224, 186, 69, 0.1);
    box-shadow: inset 0 0 0 1px rgba(224, 186, 69, 0.34);
    clip-path: var(--cut-sm);
}

.tr-stock-flag--out {
    color: #f0b0a6;
    background: rgba(168, 30, 18, 0.16);
    box-shadow: inset 0 0 0 1px rgba(168, 30, 18, 0.5);
}

/* Price sits in its own machined recess so it never reads as body copy. */
.tr-price-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tr-price-out {
    color: #f0b0a6 !important;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem) !important;
}

.tr-price-note {
    margin-top: 2px;
}

/* Detail: description and loot on the left, perks and redemption on the right. */
.tr-product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.tr-product-detail--single {
    grid-template-columns: minmax(0, 1fr);
}

.tr-product-main,
.tr-product-side {
    min-width: 0;
}

.tr-product-side {
    position: relative;
    padding-left: clamp(1rem, 2.5vw, 2rem);
}

.tr-product-side::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(237, 228, 214, 0.14) 12%, rgba(237, 228, 214, 0.14) 88%, transparent);
}

.tr-product-detail--single .tr-product-side {
    padding-left: 0;
}

.tr-product-detail--single .tr-product-side::before {
    display: none;
}

/* Loot trays. */
.tr-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 10px;
    margin-bottom: var(--sp-6);
}

.tr-item-grid .productSectionItemsContainer {
    margin-top: 0;
}

.tr-item-row {
    row-gap: 4px;
}

.tr-tray-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    color: var(--tr-ash);
}

.tr-feature-list {
    margin-bottom: var(--sp-6);
}

.tr-feature-list .productSectionFeatureContainer:first-child {
    margin-top: 0;
}

/* A chat command is quoted verbatim, so it gets a physical field. */
.tr-cmd {
    display: inline-block;
    padding: 3px 9px;
    font-family: var(--font-sign);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--tr-flame);
    background: rgba(255, 107, 26, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 158, 44, 0.28);
    word-break: break-all;
}


/* ==========================================================================
   34. CART LAYOUT
   ========================================================================== */

.tr-cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.cartLineItemsContainer,
.cartCheckoutContainer {
    min-width: 0;
}

.cartCheckoutContainer {
    position: relative;
    padding-left: clamp(1rem, 2.5vw, 2rem);
}

.cartCheckoutContainer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(237, 228, 214, 0.14) 12%, rgba(237, 228, 214, 0.14) 88%, transparent);
}

.tr-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
}

.icon-checkout {
    color: var(--tr-hazard) !important;
}


/* ==========================================================================
   35. COMPLETE, AUTH & CUSTOM PAGES
   ========================================================================== */

.tr-complete,
.tr-auth {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    padding-top: clamp(2rem, 6vw, 4rem);
}

.tr-complete-body,
.tr-auth-body {
    padding: clamp(1rem, 3vw, 2rem) 0;
}

.tr-complete-flare {
    max-height: 210px;
    width: auto;
    margin-bottom: var(--sp-5);
    filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 50px rgba(255, 107, 26, 0.22));
}

.tr-complete-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
}

.tr-auth-form {
    width: 100%;
    max-width: 380px;
    margin-top: var(--sp-5);
}

.tr-page-body {
    padding: clamp(0.5rem, 2vw, 1.5rem) clamp(0.25rem, 1.5vw, 1rem);
}


/* ==========================================================================
   36. FOOTER BLOCKS
   ========================================================================== */

.tr-footer-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1.5rem, 5vw, 4rem);
    flex-wrap: wrap;
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
    border-top: 1px solid rgba(237, 228, 214, 0.08);
    border-bottom: 1px solid rgba(237, 228, 214, 0.08);
}

.tr-footer-connect,
.tr-footer-social {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
}

/* The address is the single most copied string on the site, so it is a control
   in the footer too, not just static text. */
.tr-footer-ip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    padding: 13px 17px;
    font-family: var(--font-sign);
    font-weight: 700;
    font-size: clamp(1rem, 2.4vw, 1.375rem);
    letter-spacing: 0.1em;
    color: var(--tr-bone);
    background: #14100c;
    background-image: var(--tex-rib);
    background-blend-mode: overlay;
    border: 0;
    box-shadow:
        inset 0 0 0 1px rgba(237, 228, 214, 0.12),
        inset 0 -2px 0 rgba(0, 0, 0, 0.7);
    clip-path: var(--cut-sm);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.tr-footer-ip i {
    font-size: 0.8125rem;
    color: var(--tr-flame);
}

.tr-footer-ip:hover {
    color: #fff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 158, 44, 0.45),
        inset 0 -2px 0 rgba(0, 0, 0, 0.7);
}

.tr-footer-tagline {
    margin: 0;
    max-width: 46ch;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--footer-text-color, #a2937f);
}

.tr-footer-disclaimer {
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

.tr-footer-logo {
    max-height: 92px;
    width: auto;
    opacity: 0.7;
}


/* ==========================================================================
   37. RESPONSIVE
   ========================================================================== */

@media (min-width: 768px) {
    .container { max-width: 100% !important; }
}

@media (min-width: 1024px) {
    .container { max-width: 100% !important; }
}

@media (min-width: 1536px) {
    .container { max-width: 1320px !important; }
}

@media (max-width: 1023px) {
    .tr-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
    }

    .tr-hero-copy { order: 2; }
    .tr-sign { order: 1; max-width: 520px; }
    .tr-hero-word { text-align: center; }
    .tr-lede { text-align: center; margin-left: auto; margin-right: auto; }
    .tr-hero-actions { justify-content: center; }
    .tr-hero-eyebrow-label { align-self: center; }

    .tr-wipe {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the board has no empty siding to spray on, so the tag joins the
       flow above the heading instead of covering it. */
    .tr-wipe-spray {
        position: static;
        display: block;
        margin-bottom: calc(-1 * var(--sp-2));
        transform: rotate(-3deg);
        transform-origin: 0 50%;
    }

    /* Two-column reading layouts collapse; the welded seam between them goes
       with them, otherwise it hangs in mid air. */
    .tr-product-head,
    .tr-product-detail,
    .tr-cart-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tr-product-side,
    .cartCheckoutContainer {
        padding-left: 0;
        padding-top: var(--sp-5);
    }

    .tr-product-side::before,
    .cartCheckoutContainer::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(237, 228, 214, 0.14) 12%, rgba(237, 228, 214, 0.14) 88%, transparent);
    }

    .tr-wall-text span { font-size: clamp(4rem, 22vw, 9rem); }
}

@media (max-width: 767px) {
    :root {
        --cut-panel: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    }

    .pageContainer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .header-logo img { max-height: 58px; }

    .page-heading { font-size: clamp(2.125rem, 11vw, 3.25rem); }
    .page-subheading { font-size: 0.75rem; letter-spacing: 0.16em; }
    .pageTitle { font-size: clamp(1.75rem, 9vw, 2.5rem); }

    .pageDivider,
    .productDivider { margin: var(--sp-4) 0; }

    .pageSection,
    .productSection {
        padding: var(--sp-4) var(--sp-3);
    }

    .tr-sign { padding: var(--sp-5) var(--sp-4); }
    .tr-sign-tag { font-size: 1.75rem; top: -12px; right: 0; }

    .tr-rate { flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
    .tr-rate-value { font-size: 1.5rem; }

    .tr-connect-plate {
        grid-template-columns: minmax(0, 1fr);
    }

    .tr-connect-actions {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.6);
    }

    .tr-copy-btn,
    .tr-connect-btn {
        flex: 1;
        padding: 16px 14px;
        min-height: 0;
    }

    .tr-perk { padding: var(--sp-4); }

    .tr-ordnance { gap: var(--sp-3); flex-wrap: wrap; }

    .tr-product-title-block { justify-content: center; text-align: center; }
    .tr-product-art { margin: 0 auto; }
    .tr-product-words { align-items: center; }
    .tr-product-buy { padding: var(--sp-4) var(--sp-3); }
    .tr-stock-flag { align-self: center; }

    .tr-item-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }

    .tr-crumbs { justify-content: center; }

    .tr-footer-grid { flex-direction: column; }
    .tr-footer-connect,
    .tr-footer-social { align-items: center; text-align: center; }
    .tr-footer-ip { align-self: center; }

    .tr-complete-actions { flex-direction: column; align-items: stretch; }

    .btn { font-size: 0.875rem; padding: 14px 20px; }
    .header-button-large { font-size: 0.9375rem; padding: 15px 20px; }

    .btn-empty-cart,
    .btn-viewTrash { font-size: 0.6875rem; padding: 7px 11px; }

    .disclaimer-information { text-align: center; }

    .pageLineItemCurrency { position: relative; top: 0; }

    .productSectionHeading { font-size: 1.1875rem; }

    .header-button-large {
        width: 100%;
        margin-bottom: 6px;
        margin-right: 0;
    }

    #mainActions,
    #giftActions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .select-wrapper { width: 100%; margin-right: 0; margin-bottom: 6px; }
    #gameServerDropdown,
    #gameServerDropdownFloating { max-width: 100%; }
    .header-button-subscribe { clip-path: var(--cut-sm); }

    .giftActionsTitle { display: none; }

    .sales-list-item { right: 10px; left: 10px; width: auto; }

    /* --- Mobile tabs become a dropdown --- */
    .pageLinksContainer {
        position: relative;
        flex-direction: row;
    }

    .pageLinksDropdown {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        max-width: 100%;
        margin-left: 14px;
        padding: 11px 16px;
        font-family: var(--font-sign);
        font-weight: 600;
        font-size: 0.8125rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
        color: var(--tr-bone);
        background-color: var(--content-background-color, #16120e);
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 60%);
        border: 0;
        cursor: pointer;
        clip-path: var(--cut-tab);
        box-shadow: inset 0 3px 0 var(--tr-ember);
    }

    .pageLinksDropdownProduct { margin-right: 14px; }

    .pageLinksDropdown i {
        color: var(--content-icon, #ff6b1a);
        font-size: 0.8125rem;
    }

    .pageLinksDropdown .dropdown-arrow {
        color: var(--tr-ash);
        font-size: 0.6875rem;
    }

    .pageLinksOverlayClose {
        display: block !important;
    }

    .pageLinkMobileTitle {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 15px 18px;
        font-family: var(--font-stencil);
        font-size: 1.25rem;
        line-height: 1;
        text-transform: uppercase;
        color: var(--tr-bone);
        background: linear-gradient(180deg, #241c14, #17120d);
        border-bottom: 1px solid var(--tr-seam);
    }

    a.pageLinksGoBackMobile { display: inline-flex; }

    .pageLinks {
        display: none;
        position: absolute;
        z-index: 25;
        top: 0;
        left: 0;
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 0;
        background: #17120d;
        box-shadow: inset 0 0 0 1px rgba(237, 228, 214, 0.12), 0 30px 70px rgba(0, 0, 0, 0.9);
        clip-path: var(--cut-plate);
        overflow: hidden;
    }

    .pageLinks li a {
        padding: 15px 18px;
        clip-path: none;
        border-bottom: 1px solid #221a13;
        background-color: transparent;
        background-image: none;
    }

    .pageLinks li a.selectedPageLink {
        background-color: rgba(255, 107, 26, 0.14);
        box-shadow: inset 3px 0 0 var(--tr-ember);
    }

    .pageLinksDropdownMobileHidden { display: none !important; }

    /* --- Floating buy bar --- */
    .productFloatingBottom {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 28;
        padding: 14px;
        background: #100d0a;
        background-size: cover;
        background-position: center;
        border-top: 1px solid var(--tr-seam);
        box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.85);
        transform: translateY(110%);
        transition: transform 380ms var(--ease-out);
    }

    .productFloatingBottom::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 4px;
        background-image: var(--tex-hazard);
        background-size: 20px 20px;
        opacity: 0.6;
    }

    .productFloatingBottom.visible {
        transform: translateY(0);
    }

    .bodyProduct footer { padding-bottom: 210px; }
}

@media (max-width: 639px) {
    .currenciesList {
        left: 50%;
        transform: translateX(-50%);
        top: 40px;
        min-width: calc(100vw - 40px);
    }

    .tr-statusbar-inner { flex-direction: column; align-items: stretch; }

    .tr-status-live {
        border-right: 0;
        border-bottom: 1px solid #241c14;
        margin-right: 0;
        padding: 7px 0;
        justify-content: center;
    }

    .tr-ticker { min-height: 30px; }
}


/* ==========================================================================
   38. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .tr-bg-canvas,
    .tr-bg-sweep {
        display: none;
    }

    .tr-sign { transform: rotate(-1.2deg); }

    html.tr-js .tr-reveal {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   39. PRINT
   ========================================================================== */

@media print {
    .tr-bg,
    .tr-statusbar,
    .topbar-account,
    .productFloatingBottom,
    .sales-list-item {
        display: none !important;
    }

    html, body { background: #fff; color: #000; }
}