/* MENU-ARMORY MA6 — match-theatre skin, ONE source of truth for BOTH hosts.
   index.html (local play) and serverplay.html (server play) each <link> this
   sheet AFTER their inline styles, so equal-specificity theatre classes win.
   Grammar: Anton display, red = action, green = money, dossier mono tables. */
:root {
    --thx-red: #d65034; --thx-red-dk: #a5371f;
    --thx-cream: #e8dcbe; --thx-khaki: #b9ad8a;
    --thx-line: #3a4230; --thx-stage: #171f15;
    --thx-green: #6fbf54;
}

/* ---- K.I.A. stamp slam (AW5 grammar: things stamp, never fade) ---- */
.thx-stamp {
    display: inline-block;
    font-family: 'Anton', 'Black Ops One', Impact, sans-serif; text-transform: uppercase;
    color: #fff; background: rgba(214, 80, 52, 0.92); border: 4px solid #fff; border-radius: 8px;
    padding: 4px 26px 6px; letter-spacing: 6px; transform: rotate(-8deg);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
    animation: thxStamp 240ms cubic-bezier(.2, 1.5, .4, 1) backwards;
}
@keyframes thxStamp {
    0%   { transform: rotate(-8deg) scale(0.2); opacity: 0; }
    70%  { transform: rotate(-8deg) scale(1.08); opacity: 1; }
    100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}

/* ---- VICTORY / DEFEAT poster titles ---- */
.thx-title {
    font-family: 'Anton', 'Black Ops One', Impact, sans-serif;
    letter-spacing: 5px; text-transform: uppercase; font-weight: 400;
}
.thx-title.win  { color: #7fe08a; text-shadow: 0 0 28px rgba(127, 224, 138, 0.35), 0 2px 6px rgba(0,0,0,0.6); }
.thx-title.lose { color: #ff7a6e; text-shadow: 0 0 28px rgba(255, 122, 110, 0.35), 0 2px 6px rgba(0,0,0,0.6); }

/* ---- team-color washes (layered background-image, keeps the host's bg color) ---- */
.thx-wash-win  { background-image: linear-gradient(180deg, rgba(52, 110, 64, 0.30), transparent 55%) !important; }
.thx-wash-lose { background-image: linear-gradient(180deg, rgba(124, 30, 22, 0.32), transparent 55%) !important; }

/* ---- dossier scoreboard table ---- */
.thx-table { border-collapse: collapse; background: var(--thx-stage); border: 1px solid var(--thx-line); border-radius: 9px; overflow: hidden; }
.thx-table th {
    font: 700 9px 'JetBrains Mono', monospace; letter-spacing: 2px; color: var(--thx-khaki);
    text-align: right; padding: 8px 14px; border-bottom: 1px solid var(--thx-line); text-transform: uppercase;
}
.thx-table td { font-size: 13px; padding: 6px 14px; text-align: right; }
.thx-table th:first-child, .thx-table td:first-child,
.thx-table th.nm, .thx-table td.nm { text-align: left; }
.thx-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }
.thx-table tr.sb-you td, .thx-table tr.me td { background: rgba(214, 80, 52, 0.16); font-weight: 700; }
/* MVP row gets a stamped chip, not a fade-in star */
.thx-table tr.sb-mvp td:first-child::after {
    content: '★ MVP'; display: inline-block; margin-left: 8px; transform: rotate(-4deg);
    font: 700 9px 'JetBrains Mono', monospace; letter-spacing: 1px; color: #fff;
    background: var(--thx-red); border: 1px solid #fff; border-radius: 4px; padding: 1px 6px;
}

/* ---- rewards ticker line (numbers count up via hudChips.rewardsTicker) ---- */
.thx-rewards { font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; color: var(--thx-green); }
.thx-rewards.guest { color: var(--thx-khaki); }

/* ---- match dossier: the progression payoff block (hudChips.matchDossier),
   shared by both hosts' end cards. Sits under the rewards line. ---- */
.thx-dossier { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* MEP-4 staggered reveal — rows cascade in one beat at a time (host JS toggles .in) */
.thx-reveal { opacity: 0; transform: translateY(7px); }
.thx-reveal.in { opacity: 1; transform: none; transition: opacity .28s ease, transform .28s ease; }
@media (prefers-reduced-motion: reduce) {
    .thx-reveal { opacity: 1; transform: none; }   /* no cascade for reduced-motion */
}
/* your own match line — YOU · 9K / 3D · streak 5  ★MVP */
.thx-you {
    font: 700 13px 'JetBrains Mono', monospace; letter-spacing: 1px; color: var(--thx-cream);
    display: flex; align-items: center; gap: 8px;
}
.thx-you .thx-you-kd { color: #fff; }
.thx-you .thx-you-streak { color: var(--thx-khaki); }
/* E5: OPERATIONS run line — stages cleared + run clock */
.thx-event {
    font: 700 13px 'JetBrains Mono', monospace; letter-spacing: 1px; color: #f2b134;
}
/* E6: event reward line — green when granted, khaki CTA framing for guests */
.thx-ev-reward {
    font: 700 12px 'JetBrains Mono', monospace; letter-spacing: 1px; color: var(--thx-green);
}
.thx-ev-reward.guest { color: var(--thx-khaki); }
/* DUEL-V1: wager headline — gold WON / red LOST, the loudest line of a duel end card */
.thx-wager {
    font: 700 18px 'JetBrains Mono', monospace; letter-spacing: 2px;
    animation: thxStamp 260ms cubic-bezier(.2, 1.5, .4, 1) backwards;
}
.thx-wager.won { color: #ecc961; }
.thx-wager.lost { color: var(--thx-red); }
/* SM4: coop line (revives/saves/assists) + BEST SQUAD panel */
.thx-coop {
    font: 700 12px 'JetBrains Mono', monospace; letter-spacing: 1px; color: var(--thx-green);
}
.thx-bestsquad {
    font: 700 12px 'JetBrains Mono', monospace; letter-spacing: 1px; color: var(--thx-cream);
    display: flex; align-items: center; gap: 6px;
}
.thx-bestsquad-badge {
    display: inline-block; transform: rotate(-3deg);
    font: 700 10px 'JetBrains Mono', monospace; letter-spacing: 1px; color: #1a1408;
    background: #ecc961; border: 1px solid #fff; border-radius: 4px; padding: 1px 7px 2px;
    animation: thxStamp 240ms cubic-bezier(.2, 1.5, .4, 1) backwards;
}
/* MVP stamp — same grammar as the scoreboard MVP chip (stamped, rotated) */
.thx-mvp {
    display: inline-block; transform: rotate(-4deg);
    font: 700 10px 'JetBrains Mono', monospace; letter-spacing: 1px; color: #fff;
    background: var(--thx-red); border: 1px solid #fff; border-radius: 4px; padding: 1px 7px 2px;
    animation: thxStamp 240ms cubic-bezier(.2, 1.5, .4, 1) backwards;
}

/* ---- progress bar (weapon XP / rank) — the fill tweens on reveal (hudChips) ---- */
.thx-bar { width: min(320px, 78vw); font-family: 'JetBrains Mono', monospace; }
.thx-bar .tb-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; letter-spacing: 1px; }
.thx-bar .tb-name { color: var(--thx-cream); font-weight: 700; }
.thx-bar .tb-lv { color: var(--thx-khaki); }
.thx-bar .tb-gain { margin-left: auto; color: var(--thx-green); }
.thx-bar .tb-track { height: 7px; margin: 5px 0 3px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.thx-bar .tb-fill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--thx-khaki), var(--thx-cream)); }
.thx-bar.rank .tb-fill { background: linear-gradient(90deg, var(--thx-red-dk), var(--thx-red)); }
.thx-bar .tb-foot { font-size: 10px; letter-spacing: 1px; color: var(--thx-khaki); text-align: right; }
.thx-bar .tb-lvup { color: var(--thx-green); font-weight: 700; letter-spacing: 1px;
    display: inline-block; animation: thxStamp 240ms cubic-bezier(.2, 1.5, .4, 1) backwards; }
/* UNLOCKED line — the level-up payoff, green like money (both hosts now) */
.thx-unlocked {
    font: 700 11px 'JetBrains Mono', monospace; letter-spacing: 1px; color: var(--thx-green);
    text-align: center; max-width: min(340px, 82vw);
    animation: thxStamp 240ms cubic-bezier(.2, 1.5, .4, 1) backwards;
}

/* landscape-phone compaction (keyed on max-height per the shop-v3 lesson): tighten
   the dossier so the enriched card needs less scroll to reach the CTA. */
@media (max-height: 500px) {
    .thx-dossier { margin-top: 8px; gap: 5px; }
    .thx-bar { width: min(300px, 82vw); }
    .thx-bar .tb-head { font-size: 11px; }
    .thx-bar .tb-track { height: 6px; margin: 3px 0 2px; }
    .thx-you { font-size: 12px; }
    .thx-unlocked { font-size: 10px; }
}

/* ---- respawn countdown ring (conic sweep off --p, set by the host JS) ---- */
.thx-ring {
    --p: 1;
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Anton', Impact, sans-serif; font-size: 24px; color: #fff;
    background:
        radial-gradient(closest-side, rgba(12, 16, 14, 0.92) 73%, transparent 74% 100%),
        conic-gradient(var(--thx-red) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.14) 0);
}

/* ---- red CTA (server-play end buttons; local .btn-primary is already red) ----
   !important: must out-rank serverplay's id-scoped `#sp-end button` brass skin. */
.thx-cta {
    font-family: 'Anton', Impact, sans-serif !important; letter-spacing: 2px !important;
    background: linear-gradient(180deg, var(--thx-red), var(--thx-red-dk)) !important;
    color: #fff !important; border: 1px solid var(--thx-red-dk) !important;
}