/* ==========================================================================
   POLISH — second design pass, loaded last. Same black + gold identity, but softer corners, real depth,
   a calmer rhythm and cleaner lists. Pure CSS (no script). Everything here is additive: remove this file to get the old look back.
   ========================================================================== */
:root {
    --r: 12px;            /* panels, tiles */
    --r-s: 8px;           /* buttons, inputs, chips */
    --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 30px -16px rgba(0, 0, 0, .9);
    --surface: linear-gradient(180deg, #17171d 0%, #111115 100%);
    --gold-grad: linear-gradient(180deg, #ffe7b0 0%, #f5b53d 100%);
}

/* ---- page frame ---- */
body { background:
    radial-gradient(900px 380px at 12% -6%, rgba(255, 122, 26, .13), transparent 70%),
    radial-gradient(800px 360px at 92% -4%, rgba(166, 107, 255, .07), transparent 70%), var(--bg); }
.shell { padding-top: 1.8rem; }
.page > * + * { margin-top: 1.25rem; }
.page-head { display: flex; padding-bottom: 1.1rem; margin-bottom: .6rem; border-bottom: 1px solid var(--line); position: relative; }
.page-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 88px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--orange)); border-radius: 2px; }
.page-head h1 { background: linear-gradient(180deg, #fff 30%, #d9d4c8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-head > .row { align-self: flex-end; }
.kicker { padding: .3rem .65rem; border-radius: 99px; background: rgba(255, 122, 26, .1); border: 1px solid rgba(255, 122, 26, .28); color: #ffa35c; }

/* ---- surfaces ---- */
.panel { border-radius: var(--r); background: var(--surface); border-color: rgba(255, 255, 255, .07); box-shadow: var(--shadow); }
.panel > h2:first-child, .panel > .row > h2:first-child, .panel-title h2 { display: flex; align-items: center; gap: .6rem; }
.panel > h2:first-child::before, .panel-title h2::before { content: ""; width: 4px; height: 1.15em; border-radius: 2px; background: linear-gradient(180deg, var(--gold), var(--orange)); flex: none; }
.panel.empty { text-align: center; padding: 3rem 1.4rem; }
.panel.empty svg { width: 42px; height: 42px; color: var(--gold); opacity: .75; margin-bottom: .6rem; }
.panel.empty h3 { margin-bottom: .4rem; }
.stat { border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.stat-ico { border-radius: 10px; }

/* ---- controls ---- */
.btn { border-radius: var(--r-s); background: #15151a; border-color: rgba(255, 255, 255, .14); }
.btn:hover { box-shadow: 0 6px 18px -8px rgba(245, 181, 61, .45); }
.btn.primary, .btn.gold { background: var(--gold-grad); box-shadow: 0 6px 18px -8px rgba(245, 181, 61, .55), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.btn.primary:hover, .btn.gold:hover { box-shadow: 0 10px 24px -8px rgba(245, 181, 61, .7), 0 1px 0 rgba(255, 255, 255, .6) inset; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=datetime-local], textarea, select { border-radius: var(--r-s); background: #0b0b0e; border-color: rgba(255, 255, 255, .13); }
input[type=number] { width: 100%; background: #0b0b0e; border: 1px solid rgba(255, 255, 255, .13); color: var(--text); font: inherit; padding: .62rem .8rem; }
.row input[type=number] { width: auto; }
.tabs { border-radius: 99px; padding: 3px; gap: 2px; background: #0d0d11; border-color: rgba(255, 255, 255, .1); }
.tabs a { border: 0; border-radius: 99px; padding: .5rem 1rem; }
.tabs a.on { box-shadow: 0 4px 14px -6px rgba(245, 181, 61, .6); }
.filters { display: grid; gap: .9rem; }
progress { height: 8px; border-radius: 99px; }
progress::-webkit-progress-bar, progress::-webkit-progress-value { border-radius: 99px; }

/* ---- tables ---- */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-s); }
.table th { background: rgba(255, 255, 255, .025); border-bottom-color: var(--line2); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .015); }

/* ---- nav ---- */
.topbar { background: rgba(8, 8, 10, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -22px #000; }
.nav > a, .nav summary { border-radius: var(--r-s); }
.nav > a:hover { background: rgba(255, 255, 255, .05); }
.drop-menu { border-radius: var(--r); overflow: hidden; box-shadow: 0 18px 40px -12px #000; }
.drop-menu a { display: flex; align-items: center; gap: .6rem; }

/* ---- quests ---- */
.quest { padding: .95rem .6rem; border-radius: var(--r-s); transition: background .2s; }
.quest:hover { background: rgba(255, 255, 255, .025); }
.quest-ico { border-radius: 10px; }
.quest progress { height: 8px; }

/* ---- card captions: rarity chip left, serial number right, never overflowing ---- */
.cell-cap { min-width: 0; flex-wrap: nowrap; }
.cell-cap > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .66rem; letter-spacing: .04em; opacity: .7; text-align: right; }
.cell-cap .rarity { flex: none; }
.cell details, .cell .combat-brief { font-size: .8rem; }

/* ---- market, trades, boss ---- */
.mk-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.mk-item { padding: 1rem .9rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); align-items: stretch; transition: transform .25s var(--ease), border-color .25s; }
.mk-item:hover { transform: translateY(-3px); border-color: rgba(245, 181, 61, .4); }
.mk-info { gap: .45rem; padding-top: .3rem; }
.mk-info form, .mk-info .btn { width: 100%; }
.mk-price { padding: .3rem .8rem; border-radius: 99px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line2); font: 400 1.35rem/1 var(--display); letter-spacing: .03em; }
.tr-row { border-radius: var(--r-s); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.tr-row:hover { border-color: var(--line2); background: rgba(255, 255, 255, .07); }
.wb-hero { grid-template-columns: 13rem minmax(0, 1fr); background: radial-gradient(600px 260px at 0% 0%, rgba(192, 57, 43, .2), transparent 70%), var(--surface); border-color: rgba(192, 57, 43, .35); }
.wb-art { aspect-ratio: auto; background: none; place-items: stretch; align-items: stretch; display: flex; flex-direction: column; overflow: visible; font-size: inherit; padding: 6px; }
.wb-bar { height: 1.9rem; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 30px -8px rgba(192, 57, 43, .7); position: relative; }
.wb-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, .35) calc(10% - 1px) 10%); }
.wb-facts { list-style: none; padding: 0; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.wb-facts li { padding: .5rem .75rem; border-radius: var(--r-s); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: .88rem; }
.wb-rewards li { border-radius: var(--r-s); border: 1px solid var(--line); }
.wb-rewards li:first-child { border-color: rgba(245, 181, 61, .45); background: rgba(245, 181, 61, .07); }
.wb-me td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* ---- pick lists, notices, footer ---- */
.bt-pick-in { border-radius: var(--r-s); }
.footer, footer { color: var(--muted); }
@media (max-width: 760px) {
    .shell { padding-inline: 1rem; }
    .page-head h1 { font-size: 2.3rem; }
    .panel { padding: 1.1rem; }
    .wb-hero { grid-template-columns: minmax(0, 1fr); }
    .wb-art { max-width: 11rem; margin-inline: auto; }
    .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; border-radius: 99px; }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs a { white-space: nowrap; flex: none; }
    .filters form.row > label { flex: 1 1 42%; min-width: 0; }
    .filters form.row > label.grow { flex-basis: 100%; }
    .filters form.row select { width: 100%; }
    .filters form.row > button.btn.primary { flex: 1 1 100%; width: 100%; }
}

/* ---- footer, legal pages, support tickets ---- */
.foot { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; }
.foot-links a { color: var(--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; }
.foot-links a:hover { color: var(--gold); }
.lg-tabs { margin-bottom: 1rem; }
.lg-text { max-width: 52rem; }
.lg-text h2 { font-size: 1.5rem; margin: 1.6rem 0 .6rem; }
.lg-text h2:first-child { margin-top: 0; }
.lg-text p { color: #cfcfd6; }
.tk-thread { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.2rem; }
.tk-msg { max-width: 46rem; padding: .9rem 1.1rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.tk-msg.mine { align-self: flex-start; }
.tk-msg.staff { align-self: flex-end; border-color: rgba(245, 181, 61, .45); background: linear-gradient(180deg, rgba(245, 181, 61, .09), rgba(245, 181, 61, .03)); }
.tk-meta { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; flex-wrap: wrap; }
.tk-badge { padding: .1rem .5rem; border-radius: 99px; background: var(--gold-grad); color: #1a1100; font: 800 .6rem var(--body); letter-spacing: .1em; text-transform: uppercase; }
.tk-body { overflow-wrap: anywhere; }
.tk-reply textarea { width: 100%; }
.tk-form textarea { width: 100%; }
.tk-close { margin-top: .8rem; }
td.wrap { white-space: normal; min-width: 12rem; }

/* battle replay */
.rp-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 .6rem; }
.rp-prog { width: 100%; height: 8px; accent-color: var(--gold, #f5b53d); margin-bottom: 1rem; }
.rp-units { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rp-units li { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center; }
.rp-units li b { grid-column: 1 / -1; }
.rp-units li meter { width: 100%; }
.rp-units li.dead { opacity: .45; }
.rp-units li.s-me b { color: #6fd6a0; }
.rp-units li.s-foe b { color: #ff8a8a; }

/* friends */
.fr-add { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; }
.fr-add .field { flex: 1 1 14rem; margin: 0; }
.fr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fr-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.fr-who { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; color: inherit; }
.fr-act { margin-left: auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.fr-act form { margin: 0; }

/* signed cards */
.sig-list { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .25rem; }
.sig-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .25rem .5rem; border-left: 2px solid var(--gold, #f5b53d); background: rgba(245, 181, 61, .06); border-radius: 0 6px 6px 0; }
.sig-ink { font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive; font-style: italic; color: var(--gold, #f5b53d); font-size: 1.05rem; }
.sig-msg { font-size: .8rem; color: var(--muted, #aaa); quotes: "«\00a0" "\00a0»"; overflow-wrap: anywhere; }
.sig-x { margin: 0 0 0 auto; }
.sig-x button { background: none; border: 0; color: var(--muted, #aaa); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; }
.sig-x button:hover { color: #ff8a8a; }
.sg-bar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; position: sticky; top: .5rem; z-index: 5; }
.sg-bar .field { margin: 0; min-width: 14rem; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.sg-cell { position: relative; display: grid; gap: .35rem; justify-items: center; cursor: pointer; }
.sg-cell input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sg-card { pointer-events: none; width: 100%; border-radius: 12px; outline: 3px solid transparent; transition: outline-color .15s, transform .15s; }
.sg-cell input:checked + .sg-card { outline-color: var(--gold, #f5b53d); transform: translateY(-3px); }
.sg-cell input:focus-visible + .sg-card { outline-color: #fff; }
.sg-off { opacity: .5; cursor: not-allowed; }
.sg-off input { cursor: not-allowed; }

/* arena */
.bt-board { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .6); border-radius: 12px; overflow: hidden; }
.bt-unitstats > div { transition: background .15s, transform .15s; }
.bt-unitstats > div:hover { background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
@media (max-width: 520px) { .bt-unitstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* same card on both sides: the side must be obvious at a glance */
.bu.s-p .tcard { outline: 2.4cqw solid #4cc9ff; box-shadow: 0 0 7cqw rgba(76, 201, 255, .55); }
.bu.s-e .tcard { outline: 2.4cqw solid #ff5a6e; box-shadow: 0 0 7cqw rgba(255, 90, 110, .55); }
.bu-team { position: absolute; left: 50%; top: -6cqw; translate: -50% 0; z-index: 3; padding: 1.8cqw 7cqw; border-radius: 4cqw; font: 900 9cqw/1 var(--body); letter-spacing: .12em; pointer-events: none; color: #03141c; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.bu.s-p .bu-team { background: #4cc9ff; }
.bu.s-e .bu-team { background: #ff5a6e; color: #1c0308; }
.bu.s-p .bu-hp { border-color: #4cc9ff; }
.bu.s-e .bu-hp { border-color: #ff5a6e; }
.bu.dead .bu-team { display: none; }
.bu-st { bottom: calc(100% + 8cqw); }