:root {
    --brand-red: #ed001b;
    --brand-red-dark: #a90014;
    --arena-black: #050505;
    --arena-ink: #111;
    --arena-paper: #f4f2ed;
    --arena-line: #d8d3ca;
    --lime: var(--brand-red);
    --orange: var(--brand-red);
    --ink: var(--arena-ink);
    --paper: var(--arena-paper);
}

body { background-color: var(--arena-paper); }
.announcement { background: var(--brand-red); box-shadow: inset 0 -1px #ff5265; }
.site-header { background: var(--arena-black); border-bottom-color: var(--brand-red); }
.desktop-nav a.active, .desktop-nav a:hover { border-color: var(--brand-red); }
.icon-button:hover, .cart-button:hover { border-color: var(--brand-red); background: #1b1b1b; }
.cart-button span, .badge-label, .price-row button { background: var(--brand-red); }
.eyebrow, .hero h1 em { color: var(--brand-red); }

.hero { position: relative; }
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 52% 0 calc((1180px - 100vw) / 2);
    opacity: .45;
    background: repeating-linear-gradient(118deg, transparent 0 46px, rgba(237, 0, 27, .055) 47px 49px);
}
.hero-art .orb {
    background: repeating-radial-gradient(circle, var(--brand-red) 0 46px, var(--brand-red-dark) 47px 88px, #111 89px 93px);
    box-shadow: 18px 18px 0 rgba(0, 0, 0, .14);
}
.card-a { background: linear-gradient(150deg, #ec1730, #71000d); }
.card-b { background: linear-gradient(150deg, #171717, #be0016); }
.floating-note { background: var(--arena-black); border-color: var(--brand-red); }

.button.primary { background: var(--brand-red); }
.button.primary:hover { background: var(--arena-black); }
.button.ghost { box-shadow: inset 4px 0 var(--brand-red); }

.category { border-color: var(--brand-red); }
.category.pokemon { background: #111; }
.category.onepiece { background: var(--brand-red); border-color: #111; }
.category.rift { background: #2a2a2a; }
.category.models { background: #dedad2; }
.category:hover { box-shadow: 0 10px 0 rgba(237, 0, 27, .12); }

.products-section { background: #e7e3dc; border-color: #cbc4b9; }
.product-card { border-color: #111; }
.product-card:hover { border-color: var(--brand-red); }
.section-head h2::after, .page-hero h1::after { background: var(--brand-red); }

.sell-banner { background: var(--arena-black); border-color: var(--brand-red); }
.sell-banner::after { background: repeating-linear-gradient(125deg, transparent 0 28px, var(--brand-red) 29px 48px); }
.news-image, footer { border-color: var(--brand-red); }
.cards-news { background: linear-gradient(145deg, #f11a32, #71000d); }
footer { background: #080808; }

.admin-section { border-top-color: var(--arena-black); }
.admin-section-title > b { color: var(--brand-red); }
.admin-save { background: var(--arena-black); border-top-color: var(--brand-red); }
.admin-product.selected { border-color: var(--brand-red); box-shadow: inset 4px 0 var(--brand-red); }

@media (max-width: 900px) {
    .hero::before { inset: 0; }
}

/* Full Arena Red homepage direction */
.arena-hero { position: relative; overflow: hidden; background: linear-gradient(130deg, #f8f6f1 0%, #f2eee8 58%, #ebe6de 100%); }
.arena-hero::before { content: ""; position: absolute; inset: 0; opacity: .55; background: repeating-linear-gradient(118deg, transparent 0 62px, rgba(237,0,27,.05) 63px 65px); }
.arena-hero-inner { position: relative; min-height: 560px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 36px; }
.arena-hero-copy { padding: 70px 0; }
.arena-kicker { display: inline-flex; margin-bottom: 20px; padding: 7px 11px; color: #fff; background: var(--brand-red); font-size: 10px; font-weight: 900; letter-spacing: .14em; transform: skewX(-6deg); }
.arena-hero h1 { margin: 0; max-width: 700px; font: 900 clamp(64px,6.1vw,94px)/.83 'Barlow Condensed'; letter-spacing: -.02em; text-transform: uppercase; }
.arena-hero h1 em { color: var(--brand-red); font-style: normal; }
.arena-hero-copy > p { max-width: 560px; margin: 28px 0 0; color: #5d5b57; font-size: 17px; line-height: 1.65; }
.arena-trust { display: flex; flex-wrap: wrap; gap: 24px; color: #595752; font-size: 10px; font-weight: 800; }
.arena-trust span::before { content: "✓"; margin-right: 6px; color: var(--brand-red); }

.arena-cards { min-height: 430px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 28px 22px rgba(0,0,0,.2)); }
.arena-card { position: relative; width: 185px; height: 285px; display: grid; grid-template-rows: auto 1fr auto; place-items: center; margin: 0 -38px; padding: 24px 12px; color: #fff; border: 8px solid #fff; border-radius: 14px; font-family: 'Barlow Condensed'; text-align: center; }
.arena-card::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.25); pointer-events: none; }
.arena-card small { font-weight: 900; letter-spacing: .08em; }
.arena-card b { align-self: center; font-size: 54px; line-height: .9; }
.arena-card span { font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.card-pokemon { z-index: 1; background: linear-gradient(145deg,#d41029,#65000d); transform: rotate(-11deg) translateY(13px); }
.card-onepiece { z-index: 3; height: 310px; background: linear-gradient(145deg,#ef1730,#8a0010); transform: translateY(-13px); }
.card-rift { z-index: 2; background: linear-gradient(145deg,#252525,#080808); transform: rotate(11deg) translateY(13px); }

.arena-systems { display: grid; grid-template-columns: repeat(4,1fr); color: #fff; background: #090909; border-block: 1px solid #292929; }
.arena-systems a { min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 10px; border-right: 1px solid #292929; transition: .2s; }
.arena-systems a:last-child { border-right: 0; }
.arena-systems b { font: 900 21px 'Barlow Condensed'; letter-spacing: .03em; }
.arena-systems small { color: #777; font-size: 8px; letter-spacing: .16em; }
.arena-systems a:hover { color: #fff; background: var(--brand-red); }
.arena-systems a:hover small { color: #fff; }

.arena-drop { background: #e8e4dd; border-bottom: 1px solid #cec8bd; }
.arena-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.arena-section-head h2 { margin: 0; font: 900 48px/1 'Barlow Condensed'; text-transform: uppercase; }
.arena-section-head h2::after { content: ""; display: block; width: 66px; height: 5px; margin-top: 10px; background: var(--brand-red); transform: skewX(-28deg); }
.arena-section-head > a { padding-bottom: 7px; border-bottom: 1px solid #222; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.arena-section-head > a span { color: var(--brand-red); }

.arena-event { position: relative; min-height: 168px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; margin-top: 58px; padding: 30px 38px; overflow: hidden; color: #fff; background: #080808; border-left: 9px solid var(--brand-red); }
.arena-event::after { content: ""; position: absolute; inset: 0 0 0 65%; opacity: .16; background: repeating-linear-gradient(125deg,transparent 0 25px,var(--brand-red) 26px 43px); }
.arena-event > * { position: relative; z-index: 1; }
.arena-event-date { min-width: 100px; display: flex; align-items: center; gap: 10px; padding-right: 26px; border-right: 1px solid #3a3a3a; }
.arena-event-date b { color: var(--brand-red); font: 900 68px/.8 'Barlow Condensed'; }
.arena-event-date span { font-size: 10px; font-weight: 900; line-height: 1.4; }
.arena-event small { color: #ff4055; font-weight: 900; letter-spacing: .14em; }
.arena-event h2 { margin: 6px 0; font: 900 31px/1 'Barlow Condensed'; }
.arena-event p { margin: 0; color: #aaa; font-size: 12px; }

.arena-content { display: grid; grid-template-columns: 1.55fr .75fr; gap: 40px; align-items: stretch; }
.arena-news .news-grid { grid-template-columns: 1fr 1fr; }
.arena-sell { position: relative; overflow: hidden; padding: 36px; color: #fff; background: #111; border-top: 6px solid var(--brand-red); }
.arena-sell::after { content: "MK"; position: absolute; right: -18px; bottom: -34px; color: rgba(237,0,27,.12); font: 900 150px 'Barlow Condensed'; transform: skewX(-10deg); }
.arena-sell > * { position: relative; z-index: 1; }
.arena-sell h2 { margin: 10px 0 20px; font: 900 42px/.95 'Barlow Condensed'; text-transform: uppercase; }
.arena-sell p { color: #aaa; font-size: 13px; line-height: 1.65; }
.arena-grades { display: flex; gap: 8px; margin-top: 32px; }
.arena-grades span { width: 45px; height: 45px; display: grid; place-items: center; border: 1px solid #444; font: 900 17px 'Barlow Condensed'; }
.arena-grades span:first-child { color: #fff; background: var(--brand-red); border-color: var(--brand-red); }

@media (max-width: 920px) {
    .arena-hero-inner { grid-template-columns: 1fr; padding-top: 20px; }
    .arena-hero-copy { padding-bottom: 0; }
    .arena-cards { min-height: 370px; }
    .arena-content { grid-template-columns: 1fr; }
    .arena-event { grid-template-columns: auto 1fr; }
    .arena-event > .button { grid-column: 1 / -1; width: max-content; }
}

@media (max-width: 620px) {
    .arena-hero-inner { min-height: auto; }
    .arena-hero h1 { font-size: 59px; }
    .arena-hero-copy { padding-top: 45px; }
    .arena-cards { min-height: 310px; transform: scale(.78); margin: -25px -60px; }
    .arena-systems { grid-template-columns: 1fr 1fr; }
    .arena-systems a:nth-child(2) { border-right: 0; }
    .arena-section-head { align-items: start; flex-direction: column; }
    .arena-event { grid-template-columns: 1fr; margin-inline: 20px; padding: 28px; }
    .arena-event-date { border-right: 0; border-bottom: 1px solid #3a3a3a; padding: 0 0 20px; }
    .arena-news .news-grid { grid-template-columns: 1fr; }
}
