:root {
    --bg-color: #e5d9c3;
    --accent: #ff0055;
    --text-dark: #222;
    --text-light: #666;
    --muted: #2F4F4F;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; width: 100%; min-height: 100%;
    background-color: var(--bg-color); font-family: 'Exo 2', sans-serif;
    color: var(--text-dark); overflow-y: auto; -webkit-font-smoothing: antialiased;
}
.paper-overlay {
    position: fixed; inset: 0; background-image: url('https://www.transparenttextures.com/patterns/parchment.png');
    opacity: .5; pointer-events: none; z-index: 1;
}
.vignette-right {
    position: fixed; top: 0; right: 0; width: 120px; height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, transparent 100%);
    pointer-events: none; z-index: 2;
}
header {
    position: relative; width: 100%; height: 100px; background: #000; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    clip-path: polygon(0 0,100% 0,100% 70%,95% 85%,80% 75%,65% 95%,50% 80%,35% 100%,15% 85%,0 95%);
}
header h1 {
    margin: 0; color: #fff; font-family: 'Cinzel', serif; letter-spacing: 5px;
    text-shadow: 0 0 15px var(--accent); font-size: clamp(1.4rem,3.2vmin,2.2rem);
}
/* Same content width, title and spacing as the profile page. */
main {
    position: relative; padding: 2rem 1rem 4rem; z-index: 5; max-width: 1200px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
    min-height: calc(100vh - 100px);
}
.cards-title { text-align: center; margin-bottom: 4px; position: relative; z-index: 15; }
.cards-title h2 {
    font-family: 'Cinzel', serif; font-size: clamp(1.4rem,4.4vmin,2.2rem);
    color: var(--text-dark); letter-spacing: 1px; margin: 0;
}
.community-content { width: 100%; min-width: 0; }
[hidden] { display: none !important; }
.community-content button:where(:not([role="tab"], .elem-btn, .search-btn)), .community-content .button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
    padding: .65rem 1rem; border: 1px solid var(--accent); border-radius: 7px;
    background: #000; color: #fff; font: 600 .9rem 'Exo 2', sans-serif;
    cursor: pointer; text-decoration: none; text-align: center;
    transition: background .2s, box-shadow .2s;
}
.community-content button:where(:not([role="tab"], .elem-btn, .search-btn)):hover:not(:disabled), .community-content .button:hover {
    background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
.community-content button:disabled { opacity: .45; cursor: default; }
.community-content :focus-visible:not([role="tab"]):not(input):not(select):not(textarea) { outline: 2px solid var(--accent); outline-offset: 3px; }
.community-content label { display: flex; flex-direction: column; gap: .45rem; color: var(--muted); font-size: .85rem; font-weight: 600; }
.community-content input:not(.filter-input), .community-content select:not(.filter-select) {
    width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
    border: 2px solid transparent; border-radius: 8px; background: rgba(255,255,255,.9);
    color: var(--text-dark); font: 14px 'Exo 2', sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: border-color .2s, box-shadow .2s;
}
.community-content select:not(.filter-select) {
    cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 30px;
    background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.community-content input:not(.filter-input):focus, .community-content select:not(.filter-select):focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 20px rgba(255,0,85,.3);
}
.toolbar, .actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-end; margin: 0 0 1.25rem; }
.toolbar label { flex: 1 1 160px; }
.panel, .trade-entry {
    background: #ffffff80; border: 1px solid #372b2426; border-radius: 10px;
    padding: 1.4rem; box-shadow: 0 4px 16px #0000000a;
}
.panel { margin-bottom: 1.25rem; }
.panel h3, .trade-entry h3 { font-family: 'Cinzel', serif; font-size: 1.05rem; margin: 0 0 1.25rem; }
.panel p, .trade-entry p { line-height: 1.6; color: var(--muted); }
.panel > .actions:last-child, .trade-entry > .actions:last-child { margin: 1.25rem 0 0; }
.trade-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 1rem; }
.trade-entry h3, .trade-entry p { overflow-wrap: anywhere; }
.trade-entry img { width: 90px; height: 135px; object-fit: contain; }
.trade-entry .price { color: var(--text-dark); font-size: 1.7rem; font-weight: 600; }
.community-content a:not(.button) { color: var(--text-dark); text-decoration-color: #ff005580; text-underline-offset: .2em; }
.community-content a:not(.button):hover { color: var(--accent); }
.status { margin: 0 0 1rem; color: var(--muted); line-height: 1.6; text-align: center; }
.status:empty, #tradeLogin:empty { display: none; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--muted); line-height: 1.8; }
.empty h3 { color: #292323; font: 700 1.05rem 'Cinzel', serif; }
.empty p { margin: 0 0 1.25rem; }
.pager {
    display: flex; justify-content: center; align-items: center; gap: 15px; padding: 20px 15px 25px;
    color: var(--muted); font: 400 clamp(.87rem,2.21vmin,1rem) 'Merriweather', serif; letter-spacing: .6px;
}
.pager button { min-height: 36px; padding: 8px 16px; border-radius: 6px; }
.pager button:disabled { background: #555; border-color: #555; opacity: .65; color: #ccc; box-shadow: none; }
.pager button:disabled:focus-visible { outline: none; }
.bundle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.bundle-grid fieldset { min-width: 0; border: 1px solid #372b2426; border-radius: 8px; padding: 1rem; }
.bundle-grid legend { color: var(--muted); font-weight: 600; padding: 0 .4rem; }
.item-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-top: 1rem; }
.card-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
.card-chips button { font-size: .8rem; padding: .4rem .65rem; }
.leader-list { width: 100%; font-variant-numeric: tabular-nums; }
.leader-columns, .leader-entry { display: grid; grid-template-columns: 68px minmax(0,1fr) minmax(130px,.4fr); gap: 1rem; align-items: center; }
.leader-columns { padding: 0 .9rem .55rem; color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.leader-columns span:last-child { text-align: right; }
.leader-rows { display: grid; gap: .7rem; }
.leader-entry {
    min-height: 82px; padding: .8rem .9rem;
    background: #ffffff80; border: 1px solid #372b2426; border-radius: 10px;
    box-shadow: 0 4px 16px #0000000a;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.leader-entry:hover, .leader-entry:focus-within { background: #fffdf9; border-color: #ff005566; box-shadow: 0 6px 20px #00000012, 0 0 0 1px #ff00551a; transform: translateY(-1px); }
.leader-position { display: flex; justify-content: center; }
.leader-rank { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #372b2433; border-radius: 50%; background: #f8f1e5; color: var(--text-dark); font-size: .95rem; font-weight: 600; }
.leader-entry--podium .leader-rank { border-color: #ff005577; color: var(--accent); }
.leader-entry--first .leader-rank { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 12px #ff005533; }
.leader-player { display: flex; flex-direction: column; gap: .22rem; min-width: 0; color: var(--text-dark); text-decoration: none !important; }
.leader-player-name { overflow-wrap: anywhere; font-size: 1.04rem; font-weight: 600; }
.leader-player-hint { display: flex; align-items: center; gap: .25rem; color: var(--muted); font-size: .77rem; transition: color .2s; }
.leader-player:hover .leader-player-hint { color: var(--accent); }
.leader-score { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.leader-score-label, .leader-field-label { color: var(--muted); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.leader-score strong { color: var(--text-dark); font: 700 1.35rem 'Merriweather', serif; white-space: nowrap; }
.leader-entry--first .leader-score strong { color: var(--accent); }
.leader-list .unit { color: var(--muted); font: 600 .78em 'Exo 2', sans-serif; }
.leader-field-label { display: none; }
.leader-profile { width: 100%; }
.leader-profile-frame { display: block; width: 100%; min-height: 560px; border: 0; background: transparent; }
body.leader-profile-open main > .cards-title { display: none; }
@media(min-width:480px) {
    .community-content input:not(.filter-input), .community-content select:not(.filter-select) { font-size: 15px; padding-top: 11px; padding-bottom: 11px; }
    .pager { padding: 25px 15px 30px; }
}
@media(max-width:640px) {
    .bundle-grid { grid-template-columns: 1fr; }
    .panel, .trade-entry { padding: 1.1rem; }
    .actions button { flex: 1; }
    .leader-columns, .leader-entry { grid-template-columns: 54px minmax(0,1fr) minmax(105px,.45fr); gap: .65rem; }
    .leader-entry { padding: .75rem .65rem; }
    .leader-rank { width: 40px; height: 40px; }
    .leader-player-name { font-size: .96rem; }
    .leader-score strong { font-size: 1.12rem; }
}
@media(max-width:399px) {
    .leader-columns { display: none; }
    .leader-entry { grid-template-columns: 44px minmax(0,1fr); column-gap: .7rem; row-gap: .5rem; }
    .leader-position { grid-row: 1 / span 2; }
    .leader-rank { width: 36px; height: 36px; font-size: .82rem; }
    .leader-player { grid-column: 2; }
    .leader-score { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: baseline; }
    .leader-field-label { display: inline; }
}

#tradeLoading { width: 100%; }
#tradeSections { min-height: 240px; }
#marketFilters { margin-top: 0; }
#marketFilters .elem-btn:focus-visible { outline: none; }