/* ==========================================================================
   Monthly PvP challenge

   Same leather-and-gold ground and the same Northrend blue as the boss
   challenge, so the two pages read as one system. The fonts are the ones
   already installed for that module rather than a second copy.

   The page is ordered by what the player came for: the loot first, then how
   close they are to it, then the objectives that get them there, then the
   race against everyone else. The prize is the only part allowed to shout.
   ========================================================================== */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../../challenge/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../../challenge/fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../../challenge/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../../challenge/fonts/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

#pvpchallenge {
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.85;

    --frost: #6fc3d9;
    --frost-dim: #3d7d8f;
    --up: #8aac52;
    --gold: #e09740;
    --gold-hot: #ffc478;
    --gold-deep: #a97a2e;
    --line: #33292390;
    --muted: #8b8069;

    /* item quality, the colours players already read as rarity */
    --q0: #9d9d9d;
    --q1: #d8d3c6;
    --q2: #1eff00;
    --q3: #0070dd;
    --q4: #a335ee;
    --q5: #ff8000;
    --q6: #e6cc80;
    --q7: #00ccff;
}

#pvpchallenge * { box-sizing: border-box; }

#pvpchallenge .pvpc-count,
#pvpchallenge .pvpc-obj-pct,
#pvpchallenge .pvpc-summary-count,
#pvpchallenge .pvpc-purse-text b {
    font-variant-numeric: tabular-nums;
}

/* ---------- closed ------------------------------------------------------
   A finished challenge is frozen, not hidden: the final board stays readable
   and any prize already earned stays collectable.
   ------------------------------------------------------------------------ */
.pvpc-closed {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 22px 0;
    padding: 11px 15px;
    border: 1px solid #4a3f33;
    border-radius: 8px;
    background: rgba(20, 15, 11, 0.55);
    font-size: 12.5px;
    color: #b7ab92;
}
.pvpc-closed-mark {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #6b5c4a;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--muted);
}

/* replaces the refresh button - there is nothing left to fetch */
.pvpc-frozen {
    margin-right: auto;
    font-size: 11.5px;
    color: var(--muted);
}

/* ---------- the locked plane ---------------------------------------------
   The board stays visible but muted behind a veil until a character is
   entered. Hiding it would remove the reason to enter; dimming it makes the
   entry box the only lit thing on the page.
   ------------------------------------------------------------------------ */
.pvpc-gate { position: relative; }

.pvpc-gate-locked .pvpc-gate-body {
    /* light touch - readable, clearly inactive, and dimmed rather than
       drained: the loot behind the veil has to keep its colours */
    filter: brightness(0.6) saturate(0.85) blur(1.2px);
    opacity: 0.8;
    pointer-events: none;
    user-select: none;
    transition: filter 0.5s ease, opacity 0.5s ease;
}

.pvpc-veil {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* the veil itself carries almost no darkness - the body filter does that,
       so the lock stays crisp instead of being dimmed with everything else */
    background: radial-gradient(ellipse 50% 40% at 50% 45%, rgba(10, 7, 5, 0.35), rgba(10, 7, 5, 0.12));
    pointer-events: none;
}

.pvpc-veil-lock {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid var(--gold-deep);
    background: rgba(20, 15, 11, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 6px rgba(224, 151, 64, 0.07), 0 6px 22px -6px #000;
    animation: pvpc-breathe 3.4s ease-in-out infinite;
}

.pvpc-veil-lock svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--gold-hot);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pvpc-veil-lock svg circle { fill: var(--gold-hot); stroke: none; }

.pvpc-veil-text {
    font-size: 12.5px;
    color: #d3b98d;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* a slow breath, not a blink - it should feel dormant, not urgent */
@keyframes pvpc-breathe {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 0 6px rgba(224, 151, 64, 0.07), 0 6px 22px -6px #000; }
    50%      { transform: translateY(-4px); box-shadow: 0 0 0 10px rgba(224, 151, 64, 0.12), 0 12px 26px -8px #000; }
}

/* --- the moment it opens ------------------------------------------------ */
.pvpc-gate-opening .pvpc-gate-body {
    animation: pvpc-unlock 0.85s cubic-bezier(0.2, 0.8, 0.25, 1) 1;
}

@keyframes pvpc-unlock {
    0%   { filter: brightness(0.6) saturate(0.85) blur(1.2px); opacity: 0.8; transform: translateY(6px); }
    60%  { filter: brightness(1.12) blur(0); opacity: 1; transform: translateY(-2px); }
    100% { filter: none; opacity: 1; transform: translateY(0); }
}

/* ---------- entry ---------------------------------------------------------
   One character per account, chosen once. This gate sits above everything
   because nothing is tracked until the choice is made.
   ------------------------------------------------------------------------ */
.pvpc-enter {
    position: relative;
    margin: 18px 22px 0;
    padding: 15px 17px;
    border: 1px solid var(--gold-deep);
    border-radius: 8px;
    background:
        radial-gradient(ellipse 45% 140% at 96% 50%, rgba(224, 151, 64, 0.13), transparent 70%),
        linear-gradient(180deg, #2b2219, #211a14);
    /* everything below is dimmed, so this box is the only lit thing on the
       page - the eye goes where the one available action is */
    box-shadow: 0 0 0 1px rgba(224, 151, 64, 0.14), 0 10px 30px -14px rgba(224, 151, 64, 0.5);
    animation: pvpc-invite 3.4s ease-in-out infinite;
}

@keyframes pvpc-invite {
    0%, 100% { box-shadow: 0 0 0 1px rgba(224, 151, 64, 0.14), 0 10px 30px -14px rgba(224, 151, 64, 0.35); }
    50%      { box-shadow: 0 0 0 1px rgba(224, 151, 64, 0.3),  0 12px 34px -12px rgba(224, 151, 64, 0.6); }
}

/* the confirmation bar that replaces it, deliberately quiet */
.pvpc-entered { animation: pvpc-settle 0.6s ease-out 1; }

@keyframes pvpc-settle {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pvpc-enter-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pvpc-enter-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-hot);
}
/* the choice is permanent, so say so where the eye already is */
.pvpc-enter-warn { font-size: 11.5px; color: #d69a6a; }

.pvpc-enter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pvpc-enter-row select {
    flex: 1;
    min-width: 190px;
    max-width: 320px;
    padding: 6px 10px;
    border: 1px solid #4a3f33;
    border-radius: 5px;
    background: #1e1813;
    color: #cfc4ab;
    font-family: inherit;
    font-size: 13px;
}
.pvpc-enter-none { margin: 0; font-size: 12.5px; color: var(--muted); }

.pvpc-entered {
    margin: 18px 22px 0;
    padding: 10px 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(20, 15, 11, 0.45);
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.pvpc-entered b { color: #e2d7bd; font-weight: 700; }
.pvpc-entered-lvl { color: var(--muted); font-size: 11.5px; }
.pvpc-entered-count { margin-right: auto; font-size: 11.5px; }

/* ---------- header ------------------------------------------------------ */
.pvpc-wrap {
    padding: 18px 22px 20px;
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(ellipse 60% 120% at 88% 0%, rgba(111, 195, 217, 0.07), transparent 65%),
        rgba(20, 15, 11, 0.4);
}

.pvpc-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--line);
}

.pvpc-head-main { flex: 1; min-width: 0; }

.pvpc-head h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #efe4cd;
}

.pvpc-sub {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--muted);
}

.pvpc-realm {
    flex: none;
    margin-top: 2px;
    padding: 2px 10px;
    border: 1px solid #4a3f33;
    border-radius: 4px;
    background: rgba(20, 15, 11, 0.5);
    font-size: 11px;
    color: #a2977f;
    white-space: nowrap;
}

.pvpc-timeline { position: relative; }

/* ---------- the campaign rail -------------------------------------------
   Thirty boxes in a row read as a calendar widget, which is not what this is:
   it is one month-long campaign, so it is drawn as one length of ground with
   the days notched into it. Behind the marker is ground already taken, ahead
   of it is what is left, and the marker itself stands on today.
   ------------------------------------------------------------------------ */
.pvpc-timeline-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 13px;
    font-size: 12px;
    color: var(--muted);
}

.pvpc-dayline {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}
.pvpc-dayline-word { font-size: 12px; color: var(--muted); }
.pvpc-dayline-num {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    color: var(--gold-hot);
    text-shadow: 0 0 18px rgba(255, 196, 120, 0.3);
    font-variant-numeric: tabular-nums;
}
.pvpc-dayline-of { font-size: 12px; color: var(--muted); }

.pvpc-rail {
    position: relative;
    height: 30px;
    border-radius: 8px;
    border: 1px solid #2d251d;
    background: linear-gradient(180deg, #16110d, #221b15);
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.75);
    overflow: hidden;
}

/* ground already taken */
.pvpc-rail-fill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 7px 7px 0;
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 6px, transparent 6px 12px),
        linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 55%, #7d5920 100%);
    box-shadow: 0 0 18px -4px rgba(224, 151, 64, 0.55);
    transition: width 0.6s ease;
}

/* the day notches, cut straight out of the rail - one per day, and every
   seventh one drawn brighter so a month reads as four weeks */
.pvpc-rail::before,
.pvpc-rail::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.pvpc-rail::before {
    background: repeating-linear-gradient(to left,
        transparent 0, transparent calc(100% / var(--days) - 1px),
        rgba(0, 0, 0, 0.55) calc(100% / var(--days) - 1px), rgba(0, 0, 0, 0.55) calc(100% / var(--days)));
}
.pvpc-rail::after {
    background: repeating-linear-gradient(to left,
        transparent 0, transparent calc(700% / var(--days) - 1px),
        rgba(255, 220, 170, 0.28) calc(700% / var(--days) - 1px), rgba(255, 220, 170, 0.28) calc(700% / var(--days)));
}

/* today */
.pvpc-rail-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 0;
}

.pvpc-rail-beam {
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: -1.5px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #d5f3fb, var(--frost));
    box-shadow: 0 0 14px rgba(111, 195, 217, 0.9);
    animation: pvpc-beam 2.6s ease-in-out infinite;
}

@keyframes pvpc-beam {
    0%, 100% { box-shadow: 0 0 10px rgba(111, 195, 217, 0.6); }
    50%      { box-shadow: 0 0 20px rgba(111, 195, 217, 1); }
}

/* the day number rides on the beam, inside the rail so nothing above shifts */
.pvpc-rail-flag {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    min-width: 26px;
    height: 20px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    border: 1px solid #8fd6e8;
    background: linear-gradient(180deg, #27606e, #17414d);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 16px rgba(111, 195, 217, 0.45);
}
.pvpc-rail-flag b {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #eaf8fd;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* when the month is over the rail is simply full - no marker left to place */
.pvpc-rail-over .pvpc-rail-fill {
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px),
        linear-gradient(180deg, #5a4a35, #3a2f22);
    box-shadow: none;
}

.pvpc-rail-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 10.5px;
    color: #6f6553;
}

/* said once, at the end, in place of a running clock */
.pvpc-timeline-over {
    margin-right: auto;
    font-size: 12px;
    color: var(--muted);
}

/* ---------- summary ----------------------------------------------------- */
.pvpc-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 22px 0;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(51, 41, 35, 0.42);
}

.pvpc-summary-count {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 4px;
    direction: ltr;
}
.pvpc-summary-count b {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    color: var(--gold-hot);
}
.pvpc-summary-count span { font-size: 13px; color: var(--muted); }

.pvpc-summary-text { font-size: 13px; color: #cfc4ab; }

.pvpc-refresh {
    margin-right: auto;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: rgba(20, 15, 11, 0.5);
    color: #a2977f;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.pvpc-refresh:hover:not(:disabled) { border-color: var(--gold-deep); color: var(--gold-hot); }
.pvpc-refresh:disabled { opacity: 0.55; cursor: default; }

.pvpc-notice {
    margin: 18px 22px 0;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(36, 29, 23, 0.55);
    font-size: 12.5px;
    color: var(--muted);
}

/* ---------- objectives --------------------------------------------------
   Two columns where there is room. Each objective is self-contained: icon,
   title, its own percentage, its own bar - so a glance down the column reads
   as "what is left", not as a wall of text.
   ------------------------------------------------------------------------ */
.pvpc-objectives {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 22px 0;
}

.pvpc-obj {
    padding: 13px 15px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background:
        linear-gradient(180deg, rgba(58, 47, 39, 0.5), rgba(38, 30, 25, 0.5));
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.pvpc-obj:hover { border-color: #55483a; transform: translateY(-1px); }

.pvpc-obj-done {
    border-color: #4e5c35;
    background:
        radial-gradient(ellipse 60% 140% at 94% 0%, rgba(138, 172, 82, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(58, 62, 39, 0.45), rgba(32, 34, 24, 0.5));
}

.pvpc-obj-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}

.pvpc-obj-icon {
    position: relative;
    display: block;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    border: 1px solid #4a3f33;
    background-color: #241d17;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.pvpc-obj-done .pvpc-obj-icon { border-color: #6d8347; }

/* the tick sits on the icon, so "done" is visible before any text is read */
.pvpc-obj-tick {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(24, 32, 16, 0.62);
    color: #bde08d;
    font-size: 21px;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.pvpc-obj-title {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: #e2d7bd;
    line-height: 1.5;
}

.pvpc-obj-pct {
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(20, 15, 11, 0.5);
    font-size: 12px;
    color: #b7ab92;
    direction: ltr;
    white-space: nowrap;
}
.pvpc-obj-pct-done {
    border-color: #4e5c35;
    background: rgba(138, 172, 82, 0.14);
    color: #b6d98a;
    direction: rtl;
}

.pvpc-bar {
    position: relative;
    height: 9px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.34);
    background: #1a1410;
    overflow: hidden;
}

.pvpc-fill {
    position: relative;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold) 65%, var(--gold-hot));
    transition: width 0.45s ease;
    overflow: hidden;
}
/* a slow sheen along the filled part - progress should look alive */
.pvpc-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: translateX(-100%);
    animation: pvpc-sheen 2.8s ease-in-out infinite;
}
.pvpc-fill-done {
    background: linear-gradient(90deg, #5f7a33, #8aac52);
}
.pvpc-fill-done::after { animation: none; }

@keyframes pvpc-sheen {
    0%        { transform: translateX(-100%); }
    55%, 100% { transform: translateX(200%); }
}

.pvpc-obj-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--muted);
}
.pvpc-count { color: #b7ab92; }
/* what is still owed is the line that keeps someone playing */
.pvpc-left { color: #c8a878; }
.pvpc-finishers { margin-right: auto; }

/* ---------- the help note -----------------------------------------------
   Knowing an objective exists is not the same as knowing where to go. The
   note stays folded away so the card is still a progress row, and it is a
   <details> element so it needs no script and survives a board refresh.
   ------------------------------------------------------------------------ */
.pvpc-hint { margin-top: 9px; }

.pvpc-hint-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 11px 2px 9px;
    border: 1px solid #4a3f33;
    border-radius: 999px;
    background: rgba(20, 15, 11, 0.5);
    font-size: 11.5px;
    color: #b0a086;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.pvpc-hint-btn::-webkit-details-marker { display: none; }
.pvpc-hint-btn:hover { border-color: var(--gold-deep); color: var(--gold-hot); }

.pvpc-hint-mark {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 10px;
    line-height: 1;
}

.pvpc-hint[open] .pvpc-hint-btn {
    border-color: var(--gold-deep);
    color: var(--gold-hot);
}

.pvpc-hint-body {
    margin-top: 8px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-right: 2px solid var(--gold-deep);
    border-radius: 7px;
    background: rgba(20, 15, 11, 0.55);
    font-size: 12.5px;
    line-height: 2;
    color: #c6bba2;
    animation: pvpc-hint-open 0.25s ease-out 1;
}

@keyframes pvpc-hint-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* what the player types, in the game's own direction */
#pvpchallenge .pvpc-cmd {
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    margin: 0 3px;
    padding: 1px 8px;
    border: 1px solid #55483a;
    border-radius: 5px;
    background: #171210;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
    color: var(--gold-hot);
}

.pvpc-state { font-size: 11.5px; color: var(--muted); }
.pvpc-state-claimed { color: var(--up); }
.pvpc-state-done { color: var(--up); }

.pvpc-claim {
    padding: 5px 16px;
    border: 1px solid var(--gold-deep);
    border-radius: 5px;
    background: rgba(224, 151, 64, 0.16);
    color: var(--gold-hot);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
.pvpc-claim:hover:not(:disabled) { background: rgba(224, 151, 64, 0.3); color: #fff; }
.pvpc-claim:disabled { opacity: 0.55; cursor: default; }

/* The one button that pays the whole challenge out earns some weight. */
.pvpc-claim-big {
    padding: 9px 24px;
    font-size: 13.5px;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(255, 196, 120, 0.3), rgba(224, 151, 64, 0.16));
    box-shadow: 0 6px 18px -10px rgba(255, 196, 120, 0.8);
}

/* ---------- the race -----------------------------------------------------
   A completion challenge has no score to rank on, so the board ranks by how
   close each player is to the prize: objectives finished first, then overall
   progress. Kept visually quieter than the prize - it is context.
   ------------------------------------------------------------------------ */
.pvpc-board { margin: 18px 22px 0; }

.pvpc-board-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}
.pvpc-board-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
}
.pvpc-board-note { font-size: 11.5px; color: var(--muted); }
.pvpc-board-count { margin-right: auto; font-size: 11.5px; color: var(--muted); }

.pvpc-board-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

#pvpchallenge .pvpc-board-wrap table {
    border-collapse: collapse;
    width: 100%;
    min-width: 480px;
    font-size: 13px;
}

#pvpchallenge .pvpc-board-wrap th,
#pvpchallenge .pvpc-board-wrap td {
    padding: 8px 12px;
    text-align: right;
    border-bottom: 1px solid var(--line);
}
#pvpchallenge .pvpc-board-wrap thead th {
    background: #1d1712;
    color: var(--gold);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
#pvpchallenge .pvpc-board-wrap tbody tr:last-child td { border-bottom: none; }
#pvpchallenge .pvpc-board-wrap tbody tr:hover { background: rgba(0, 0, 0, 0.18); }

.pvpc-b-place {
    width: 52px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* The top three are the only places anyone plays for; the rest are numbers. */
.pvpc-rank {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid transparent;
    font-size: 12px;
    direction: ltr;
}
.pvpc-rank-1 {
    border-color: #c9a227;
    background: radial-gradient(circle at 50% 30%, #f3d98a, #b98d1e);
    color: #2a1f08;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(243, 217, 138, 0.35);
}
.pvpc-rank-2 {
    border-color: #9aa3ad;
    background: radial-gradient(circle at 50% 30%, #dfe5ea, #8b949e);
    color: #24282c;
    font-weight: 700;
}
.pvpc-rank-3 {
    border-color: #a5703c;
    background: radial-gradient(circle at 50% 30%, #d9a06a, #8a5a2c);
    color: #2a1a0b;
    font-weight: 700;
}

.pvpc-b-lvl { color: var(--muted); font-size: 11px; }
.pvpc-b-done {
    width: 74px;
    color: #b7ab92;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pvpc-b-bar {
    width: 40%;
    min-width: 130px;
}
.pvpc-b-track {
    display: inline-block;
    width: calc(100% - 46px);
    height: 6px;
    vertical-align: middle;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.34);
    background: #1a1410;
    overflow: hidden;
}
.pvpc-b-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.pvpc-b-pct {
    display: inline-block;
    width: 40px;
    text-align: left;
    direction: ltr;
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

tr.pvpc-me td { background: rgba(224, 151, 64, 0.13); }
tr.pvpc-me .pvpc-b-place,
tr.pvpc-me .pvpc-b-done { color: var(--gold-hot); font-weight: 700; }

.pvpc-me-chip {
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 3px;
    border: 1px solid var(--gold-deep);
    background: rgba(224, 151, 64, 0.2);
    color: var(--gold-hot);
    font-size: 9.5px;
}

tr.pvpc-b-gap td {
    text-align: center;
    color: #4e4438;
    padding: 3px;
    background: #1b1611;
}

/* ---------- the prize ---------------------------------------------------
   One prize for the whole challenge, and it opens the page. It stays visibly
   locked until every objective is done - that is the entire point of it.
   ------------------------------------------------------------------------ */
.pvpc-prize {
    position: relative;
    margin: 18px 22px 0;
    border: 1px solid #4a3f33;
    border-radius: 11px;
    background:
        radial-gradient(ellipse 70% 120% at 50% 0%, rgba(224, 151, 64, 0.07), transparent 70%),
        linear-gradient(180deg, rgba(43, 34, 25, 0.75), rgba(28, 22, 17, 0.75));
    overflow: hidden;
}

/* earned: the whole panel lights up and stays lit */
.pvpc-prize-ready {
    border-color: var(--gold);
    background:
        radial-gradient(ellipse 70% 130% at 50% 0%, rgba(255, 196, 120, 0.2), transparent 72%),
        linear-gradient(180deg, #342718, #221a13);
    box-shadow: 0 0 0 1px rgba(255, 196, 120, 0.25), 0 16px 44px -22px rgba(255, 196, 120, 0.85);
    animation: pvpc-prize-glow 3.6s ease-in-out infinite;
}

@keyframes pvpc-prize-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 196, 120, 0.2), 0 14px 38px -24px rgba(255, 196, 120, 0.6); }
    50%      { box-shadow: 0 0 0 1px rgba(255, 196, 120, 0.4), 0 20px 52px -20px rgba(255, 196, 120, 1); }
}

.pvpc-prize-claimed { border-color: #4e5c35; }

.pvpc-prize-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 17px;
    border-bottom: 1px solid var(--line);
    background: rgba(20, 15, 11, 0.4);
}

.pvpc-prize-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold);
}
.pvpc-prize-ready .pvpc-prize-title { color: var(--gold-hot); }

.pvpc-prize-cond { font-size: 11.5px; color: var(--muted); }

/* how close the viewer is, right next to what they are playing for */
.pvpc-prize-track {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.pvpc-prize-track-bar {
    display: block;
    width: 110px;
    height: 6px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    background: #1a1410;
    overflow: hidden;
}
.pvpc-prize-track-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-hot));
}
.pvpc-prize-track-num {
    font-size: 11.5px;
    color: #b7ab92;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

.pvpc-prize-body {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 20px 17px;
}

.pvpc-prize-list {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.pvpc-prize-action { flex: none; min-width: 110px; text-align: center; }

.pvpc-prize-lock {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--muted);
}
.pvpc-prize-lock-mark { font-size: 17px; }
.pvpc-prize-lock-text {
    font-size: 13px;
    font-weight: 700;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* ---------- loot tiles ---------------------------------------------------
   The reward is the reason to play, so the items are shown the way the game
   shows loot: a framed icon at quality colour with the name under it. Players
   read the colour before they read anything else.
   ------------------------------------------------------------------------ */
.pvpc-loot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 92px;
    text-decoration: none;
    transition: transform 0.18s ease;
}

.pvpc-loot-frame {
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
    padding: 3px;
    border-radius: 9px;
    border: 2px solid var(--q1);
    background: linear-gradient(180deg, #2b2219, #191410);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.pvpc-loot-icon {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: #241d17;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.pvpc-loot-name {
    width: 100%;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--q1);
    direction: ltr;
    /* two lines at most, so a long item name cannot push the row apart */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pvpc-loot-count {
    position: absolute;
    bottom: 1px;
    left: 2px;
    padding: 0 4px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 10.5px;
    line-height: 16px;
    direction: ltr;
}

/* The state mark sits in the corner instead of over the artwork: a locked
   reward still has to look worth wanting, and a greyed-out icon does not. */
.pvpc-loot-seal {
    position: absolute;
    top: -6px;
    right: -6px;
    display: none;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(12, 9, 6, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    font-size: 12px;
    line-height: 1;
}

/* --- quality colours ---------------------------------------------------- */
.pvpc-q0 .pvpc-loot-frame { border-color: var(--q0); }
.pvpc-q0 .pvpc-loot-name  { color: var(--q0); }
.pvpc-q1 .pvpc-loot-frame { border-color: var(--q1); }
.pvpc-q1 .pvpc-loot-name  { color: var(--q1); }
.pvpc-q2 .pvpc-loot-frame { border-color: var(--q2); }
.pvpc-q2 .pvpc-loot-name  { color: var(--q2); }
.pvpc-q3 .pvpc-loot-frame { border-color: var(--q3); }
.pvpc-q3 .pvpc-loot-name  { color: var(--q3); }
.pvpc-q4 .pvpc-loot-frame { border-color: var(--q4); }
.pvpc-q4 .pvpc-loot-name  { color: var(--q4); }
.pvpc-q5 .pvpc-loot-frame { border-color: var(--q5); }
.pvpc-q5 .pvpc-loot-name  { color: var(--q5); }
.pvpc-q6 .pvpc-loot-frame { border-color: var(--q6); }
.pvpc-q6 .pvpc-loot-name  { color: var(--q6); }
.pvpc-q7 .pvpc-loot-frame { border-color: var(--q7); }
.pvpc-q7 .pvpc-loot-name  { color: var(--q7); }

/* --- locked: out of reach, but still shown in full colour ---------------
   The icon keeps its own colours and its quality border; only the padlock
   says it is not yours yet. Draining the colour out of a reward makes it
   look like junk, which is the opposite of the point.
   ------------------------------------------------------------------------ */
.pvpc-loot-locked { cursor: help; }
.pvpc-loot-locked .pvpc-loot-frame {
    filter: brightness(0.92);
}
.pvpc-loot-locked .pvpc-loot-seal {
    display: flex;
    border-color: rgba(224, 151, 64, 0.45);
}
.pvpc-loot-locked .pvpc-loot-seal::before { content: "\1F512"; }
.pvpc-loot-locked:hover .pvpc-loot-frame { filter: none; }

/* --- ready: the tile is the claim button -------------------------------- */
.pvpc-loot-ready { cursor: pointer; }
.pvpc-loot-ready .pvpc-loot-frame {
    box-shadow: 0 0 0 3px rgba(255, 196, 120, 0.2), 0 0 22px rgba(255, 196, 120, 0.45);
    animation: pvpc-loot-pulse 2.4s ease-in-out infinite;
}
.pvpc-loot-ready:hover { transform: translateY(-4px); }
.pvpc-loot-ready:hover .pvpc-loot-frame {
    box-shadow: 0 0 0 3px rgba(255, 196, 120, 0.5), 0 0 30px rgba(255, 196, 120, 0.8);
    animation: none;
}

@keyframes pvpc-loot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 196, 120, 0.16), 0 0 16px rgba(255, 196, 120, 0.3); }
    50%      { box-shadow: 0 0 0 3px rgba(255, 196, 120, 0.42), 0 0 30px rgba(255, 196, 120, 0.7); }
}

/* --- claimed ------------------------------------------------------------ */
.pvpc-loot-claimed { cursor: default; }
.pvpc-loot-claimed .pvpc-loot-frame {
    filter: brightness(0.88);
}
.pvpc-loot-claimed .pvpc-loot-seal {
    display: flex;
    border-color: #6d8347;
    color: #bde08d;
    font-weight: 700;
}
.pvpc-loot-claimed .pvpc-loot-seal::before { content: "\2713"; }

/* while its claim request is in flight */
.pvpc-working { opacity: 0.5; pointer-events: none; }

/* ---------- coins and cash ----------------------------------------------
   Not items, so they are not framed like items: a struck coin with the
   amount beside it. Cash wears frost blue, coins wear gold - the two
   currencies must never be mistaken for each other.
   ------------------------------------------------------------------------ */
.pvpc-purse {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 10px;
    border: 1px solid var(--gold-deep);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(224, 151, 64, 0.14), rgba(20, 15, 11, 0.4));
}

.pvpc-purse-coin {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #c9a227;
    background: radial-gradient(circle at 50% 32%, #ffe6a8, #c58c1e 70%, #8c5f14);
    box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.35);
}
.pvpc-purse-mark {
    font-size: 15px;
    color: #6b4a0f;
    line-height: 1;
}
.pvpc-purse-coin .pvpc-loot-seal { top: -8px; right: -8px; }

.pvpc-purse-text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.pvpc-purse-text b {
    font-size: 17px;
    font-weight: 900;
    color: var(--gold-hot);
    direction: ltr;
}
.pvpc-purse-text span { font-size: 11.5px; color: #b7ab92; }

/* cash is a different currency from coins, so it does not wear the same gold */
.pvpc-purse-cash {
    border-color: #4e6c8a;
    background: linear-gradient(180deg, rgba(111, 195, 217, 0.14), rgba(20, 15, 11, 0.4));
}
.pvpc-purse-cash .pvpc-purse-coin {
    border-color: #6fc3d9;
    background: radial-gradient(circle at 50% 32%, #d8f3fb, #4f9fb5 70%, #2d6b7d);
}
.pvpc-purse-cash .pvpc-purse-mark { color: #10414f; }
.pvpc-purse-cash .pvpc-purse-text b { color: #9fd8e8; }

/* the purse takes the same three states as the loot tiles - and, like them,
   keeps its colour while locked */
.pvpc-purse.pvpc-loot-locked { cursor: default; }
.pvpc-purse.pvpc-loot-locked .pvpc-purse-coin { filter: brightness(0.92); }
.pvpc-purse.pvpc-loot-locked .pvpc-loot-seal {
    display: flex;
    border-color: rgba(224, 151, 64, 0.45);
}

.pvpc-purse.pvpc-loot-ready .pvpc-purse-coin {
    animation: pvpc-loot-pulse 2.4s ease-in-out infinite;
}

.pvpc-purse.pvpc-loot-claimed { border-color: #4e5c35; }
.pvpc-purse.pvpc-loot-claimed .pvpc-purse-coin { filter: brightness(0.9); }
.pvpc-purse.pvpc-loot-claimed .pvpc-loot-seal {
    display: flex;
    border-color: #6d8347;
    color: #bde08d;
    font-weight: 700;
}

/* ---------- character picker -------------------------------------------- */
.pvpc-picker {
    padding: 12px 17px 15px;
    border-top: 1px solid var(--line);
    background: rgba(20, 15, 11, 0.3);
}
.pvpc-picker label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--muted);
}
.pvpc-picker select {
    width: 100%;
    max-width: 320px;
    padding: 5px 9px;
    border: 1px solid #4a3f33;
    border-radius: 4px;
    background: #1e1813;
    color: #cfc4ab;
    font-family: inherit;
    font-size: 12.5px;
}

/* ---------- misc -------------------------------------------------------- */
.pvpc-empty {
    grid-column: 1 / -1;
    padding: 34px 16px;
    text-align: center;
    color: var(--muted);
}
.pvpc-empty-icon { font-size: 26px; color: #4a3f33; margin-bottom: 8px; }
.pvpc-empty p { margin: 0; }

.pvpc-rules {
    margin: 18px 22px 22px;
    padding: 13px 16px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: rgba(20, 15, 11, 0.5);
    font-size: 12px;
    line-height: 2.05;
    color: var(--muted);
    max-width: 78ch;
}

/* Flash a row that has just been finished by a refresh. */
.pvpc-obj.pvpc-flash { animation: pvpc-flash 1.1s ease-out 1; }

@keyframes pvpc-flash {
    0%   { box-shadow: 0 0 0 0 rgba(138, 172, 82, 0.5); }
    100% { box-shadow: 0 0 0 9px rgba(138, 172, 82, 0); }
}

@media (max-width: 860px) {
    .pvpc-objectives { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .pvpc-wrap { padding: 16px; }
    .pvpc-objectives { padding: 14px 16px 0; }
    .pvpc-summary, .pvpc-prize, .pvpc-notice, .pvpc-board,
    .pvpc-enter, .pvpc-entered, .pvpc-closed { margin-left: 16px; margin-right: 16px; }
    .pvpc-rules { margin: 16px; }
    .pvpc-prize-track { margin-right: 0; width: 100%; }
    .pvpc-prize-body { gap: 14px; }
    .pvpc-prize-action { width: 100%; }
    .pvpc-loot { width: 78px; }
    .pvpc-loot-frame { width: 58px; height: 58px; }
    .pvpc-obj-icon { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    #pvpchallenge * { animation: none !important; transition: none !important; }
}