/* Rigel: watercolor adventure journal with a modern player dashboard.
   Structural layout lives in app.css; this file owns the visual theme. */
:root {
  --canvas:#f7f4ed; --surface:#fffdf8; --ink:#333e3a; --muted:#626c65;
  --line:#dfdfd2; --coral:#426a59; --coral-dark:#2d5141; --navy:#3c5148;
  --mint:#e6eee4; --success:#2e6650; --danger:#984c49;
  --lavender:#eeebf5; --gold:#a8894c; --radius:1.25rem;
  --shadow:0 8px 32px rgba(63,73,53,.055);
  --display:Georgia,"Palatino Linotype","Book Antiqua",serif;
  font-family:"Segoe UI",ui-sans-serif,system-ui,sans-serif;
}
body {
  background:radial-gradient(ellipse at 6% 12%,#dfeadb88,transparent 32rem),
    radial-gradient(ellipse at 94% 34%,#e8dff277,transparent 35rem),
    radial-gradient(ellipse at 15% 85%,#f0dfcd66,transparent 30rem),var(--canvas);
  line-height:1.6;
}
main,footer { width:min(76rem,calc(100% - 4rem)); }
h1,h2,h3 { font-family:var(--display); font-weight:500; text-transform:none; letter-spacing:-.035em; line-height:1.18; color:var(--ink); }
h1,.listing-page h1,.player-page h1,.auth-card h1 { font-size:clamp(2.35rem,4.8vw,4.2rem); line-height:1.1; }
h2 { font-size:clamp(1.5rem,2.8vw,2.15rem); }
h3 { font-size:1.3rem; }
.eyebrow { color:var(--coral-dark); font-size:.68rem; font-weight:700; letter-spacing:.18em; }
.muted,.listing-copy,.hero-copy { color:var(--muted); }
a { text-underline-offset:.2em; }
::selection { background:#ddd8eb; color:#303b35; }
.site-header {
  width:min(80rem,calc(100% - 3rem)); min-height:5.6rem; top:.75rem;
  margin:.75rem auto 1.75rem; padding:.3rem 1.7rem .3rem 1rem;
  border:1px solid #e1dfd1; border-radius:1.15rem;
  background:rgba(255,253,247,.96); box-shadow:var(--shadow);
}
.brand img { width:96px; height:72px; }
.brand { gap:.5rem; flex-shrink:0; letter-spacing:0; }
.brand-name { max-width:9rem; font-family:var(--display); font-size:1.15rem; font-weight:600; line-height:1.2; }
.site-header nav { gap:.3rem; font-size:.82rem; font-weight:600; text-transform:none; letter-spacing:0; }
.site-header nav > a,.nav-group > summary { padding:.65rem .9rem; border-radius:.6rem; }
.site-header nav > a:hover,.nav-group > summary:hover { background:var(--mint); }
.site-header nav > a[href="/donate"] { margin-left:.65rem; color:var(--coral-dark); border:1px solid #ccd9c9; background:#edf2e9; }
.nav-group div { top:calc(100% + .5rem); padding:.6rem; border-radius:.85rem; border-color:var(--line); box-shadow:var(--shadow); }
.nav-group div a { border-radius:.45rem; }
.nav-group div a:hover { background:var(--mint); }
footer { margin-top:1rem; padding-block:2rem; font-size:.8rem; }
footer strong { font-family:var(--display); color:var(--navy); font-size:1.1rem; font-weight:500; }
.button,.auth-card button,.admin-search button,.admin-form-panel button,.admin-log-filter button,.wiki-search button {
  min-height:2.8rem; padding:.75rem 1.3rem; border:1px solid var(--coral);
  border-radius:.65rem; background:var(--coral); color:#fffdf8;
  font-size:.85rem; font-weight:650; letter-spacing:0; text-transform:none;
  box-shadow:0 3px 8px #426a5914; transition:background .15s,box-shadow .15s;
}
.button:hover,.button:focus-visible,.auth-card button:hover,.admin-search button:hover,.admin-form-panel button:hover,.wiki-search button:hover {
  background:var(--coral-dark); transform:none; box-shadow:0 4px 12px #426a5922;
}
.button.secondary { color:var(--coral-dark); background:#fffdf7; border-color:#bcccbc; box-shadow:none; }
.button.secondary:hover { background:var(--mint); color:var(--coral-dark); }
.danger-button { border-radius:.65rem; background:#faf0ec; font-size:.85rem; }
.auth-card input,.auth-card select,.admin-search input,.admin-form-panel input,.admin-form-panel select,.admin-form-panel textarea,.admin-log-filter input,.wiki-search input {
  min-width:0; min-height:2.8rem; border-radius:.65rem; border:1px solid #d7dccf;
  background:#fffefa; padding:.8rem 1rem; color:var(--ink);
}
input:focus,select:focus,textarea:focus { border-color:var(--coral); box-shadow:0 0 0 3px #dfe9d8; }
.auth-card label,.admin-search label,.admin-form-panel label,.admin-log-filter label { font-weight:600; font-size:.85rem; }
.admin-search label > div { display:flex; gap:.6rem; }
.admin-search label > div input { flex:1; width:100%; }
.form-message,.success-message { border-radius:.65rem; font-size:.9rem; }
.dialog-card { border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.richtext-toolbar button { border-radius:.4rem; }
.panel,.auth-card { border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); background:var(--surface); }
.section-heading { align-items:center; padding-bottom:1rem; border-bottom:1px solid #e6e5d9; }
.section-heading h2 { margin-bottom:0; }
.status-card,.metric-card { min-height:6.5rem; border:1px solid #e4e6d8; border-radius:.8rem; background:#f5f7ef; padding:1rem 1.2rem; }
.status-card h3 { font-family:inherit; font-size:.9rem; font-weight:650; }
.status-dot { width:.5rem; height:.5rem; }
.status-dot.online { box-shadow:0 0 0 .25rem #dbe8d8; }
.metric-card { background:#f6f4fa; border-color:#e5e0ed; }
.metric-card strong { font-family:var(--display); font-weight:500; font-size:2.15rem; color:#535b4b; margin-bottom:.2rem; }
.listing-page,.player-page,.error-page { padding:1.5rem 0 4rem; }
.page-heading .listing-copy { margin:0; max-width:38rem; }
.page-heading h1 { margin-bottom:.8rem; }
.page-heading .ranking-tabs,.page-heading .page-actions { flex-basis:100%; width:100%; max-width:100%; }
.page-heading .ranking-tabs { margin-top:.4rem; }
.ranking-tabs { border:1px solid #dcdfd1; border-radius:.75rem; background:#f0f3e9; padding:.3rem; gap:.2rem; }
.ranking-tabs a { padding:.65rem .9rem; border-radius:.45rem; font-weight:600; font-size:.8rem; }
.ranking-tabs a.active { background:var(--coral); }
.ranking-tabs a:hover:not(.active) { background:#e0e8d8; color:var(--coral-dark); }
.ranking-panel { padding:0; }
th { background:#eff2e8; color:#56644f; font-size:.7rem; letter-spacing:.08em; font-weight:700; padding:1rem 1.2rem; }
td { color:var(--ink); padding:1.05rem 1.2rem; font-size:.87rem; border-color:#ebeade; }
tbody tr:nth-child(even) { background:#fcfaf5; }
tbody tr:hover { background:#f0f3e8; }
td strong { font-weight:650; }
.pagination { padding:1rem 1.2rem; background:#f9f9f0; gap:.6rem; }
.pagination a { border:1px solid #d7dfcb; border-radius:.5rem; padding:.4rem .75rem; min-height:2.5rem; font-size:.8rem; background:var(--surface); text-align:center; }
.pagination span { font-size:.8rem; color:#70796b; }
.pagination strong { font-weight:500; }
.detail-grid { padding:0; background:#e5e7d9; }
.detail-grid div { background:var(--surface); }
.detail-grid span { font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; }
.detail-grid strong { font-weight:600; }
.character-card { border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.character-card:hover { border-color:#b7caac; }
.character-sprite { background:#f1f3e9; border-radius:.85rem; }
.availability { border-radius:2rem; font-size:.75rem; font-weight:650; padding:.4rem .85rem; }
.back-link { font-size:.85rem; font-weight:600; margin-bottom:1.5rem; }
.auth-card { padding:2.25rem; border-top:1px solid var(--line); }
.auth-card h1 { font-size:2.7rem; }
.auth-card form { gap:1.2rem; margin-top:1.6rem; }
.form-footer { font-size:.85rem; }
.form-footer a { color:var(--coral-dark); }
.empty-state { text-align:center; padding:3rem 1.5rem; }
.admin-capability { border-radius:.8rem; }
.mobile-menu { display:none; }
.hero { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); min-height:30rem; padding:3rem; gap:2rem; margin-top:0; border:1px solid #dedfce; border-radius:1.7rem; background:linear-gradient(115deg,#fffdf7 35%,#f3f3e9); box-shadow:var(--shadow); }
.hero::before { inset:1rem; clip-path:none; border:1px solid #c8bd9566; background:none; border-radius:1.1rem; pointer-events:none; }
.hero::after { position:absolute; top:1.7rem; left:1.9rem; content:"✦"; color:var(--gold); font-size:.9rem; }
.hero-content { padding-left:.8rem; }
.hero-copy { font-size:1rem; line-height:1.8; }
.hero-art { align-self:center; min-height:0; }
.hero-art img { position:relative; right:auto; bottom:auto; width:100%; height:auto; max-height:none; filter:none; border-radius:1.25rem; object-fit:cover; }
.hero h1 { font-family:var(--display); font-weight:500; text-transform:none; font-size:clamp(2.6rem,5.1vw,4.65rem); line-height:1.05; letter-spacing:-.055em; }
.home-sections { padding-top:2rem; }
.home-rates { padding:clamp(1.25rem,3vw,2rem); }
.home-rates .section-heading { align-items:center; flex-wrap:wrap; gap:1rem; }
.home-rates h2 { font-size:clamp(1.7rem,3vw,2.3rem); }
.home-rates-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.home-rate-card { padding:1.25rem; border:1px solid var(--line); border-radius:.9rem; background:var(--mint); }
.home-rate-card h3 { font-size:.95rem; font-weight:650; margin:0 0 1rem; }
.home-rate-card dl { margin:0; }
.home-rate-card dl > div { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin:.55rem 0; }
.home-rate-card dt { color:var(--muted); font-size:.85rem; }
.home-rate-card dd { margin:0; font-weight:750; font-size:1.3rem; font-variant-numeric:tabular-nums; }
.home-rate-card > strong { display:block; font-size:1.9rem; }
.home-rate-card p { font-size:.8rem; line-height:1.6; color:var(--muted); margin:.75rem 0 0; }
.home-rates-note { margin:1.5rem 0 .5rem; line-height:1.7; }
.home-rates-example { color:var(--muted); font-size:.9rem; line-height:1.7; margin:0; }
@media (max-width:1000px) { .home-rates-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px) { .home-rates-grid { grid-template-columns:1fr; } }
.home-links { gap:1.25rem; }
.home-link::after { display:none; }
.home-link,.home-link:nth-child(2),.home-link:nth-child(3) { min-height:17rem; padding:1.6rem; padding-top:8.8rem; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); box-shadow:var(--shadow); background-color:var(--surface); background-size:100% 100%,100% auto; background-repeat:no-repeat; background-position:center,center -2rem; background-image:linear-gradient(0deg,#fffdf8 37%,#fffdf8e0 50%,#fffdf800 90%),url('/static/img/rigel/battleground.webp'); }
.home-link:nth-child(2) { background-image:linear-gradient(0deg,#fffdf8 37%,#fffdf8e0 50%,#fffdf800 90%),url('/static/img/rigel/aventura.webp'); }
.home-link:nth-child(3) { background-image:linear-gradient(0deg,#fffdf8 37%,#fffdf8e0 50%,#fffdf800 90%),url('/static/img/rigel/objetos.webp'); }
.home-link h2 { font-size:1.75rem; }
.home-link p { color:var(--muted); font-size:.9rem; }
.home-link .eyebrow { color:var(--coral-dark); font-size:.65rem; margin-bottom:.35rem; }
.home-link:hover { border-color:#aec3a9; box-shadow:0 10px 25px #426a5914; }
.world-panel { border-radius:var(--radius); border:1px solid #dbe2d0; color:var(--ink); padding:2.5rem; background:linear-gradient(90deg,#eaf0e3 25%,#eaf0e3f0 55%,#eaf0e340),url('/static/img/rigel/aventura.webp') right center/60% auto no-repeat; }
.world-panel h2 { max-width:30rem; }
.world-panel p { color:var(--muted); max-width:32rem; }
.world-panel .eyebrow { color:var(--coral-dark); }
main[data-art] { --section-art:url('/static/img/rigel/biblioteca.webp'); }
main[data-art="objetos"] { --section-art:url('/static/img/rigel/objetos.webp'); }
main[data-art="instancias"] { --section-art:url('/static/img/rigel/instancias.webp'); }
main[data-art="battleground"] { --section-art:url('/static/img/rigel/battleground.webp'); }
main[data-art] > .page-heading { display:flex; flex-wrap:wrap; align-items:center; min-height:14rem; padding:2.5rem; padding-right:clamp(12rem,28vw,22rem); border:1px solid var(--line); border-radius:var(--radius); background-image:linear-gradient(90deg,#fffdf8 38%,#fffdf8e8 61%,#fffdf820),var(--section-art); background-position:center,right center; background-size:100% 100%,22rem auto; background-repeat:no-repeat; box-shadow:var(--shadow); }
.auth-page { min-height:70vh; background:url('/static/img/rigel/biblioteca.webp') left center/min(49%,34rem) auto no-repeat; padding:2rem 0 3rem 48%; }
.wiki-page { padding-block:2rem 4rem; }
.wiki-page h1,.wiki-page h2,.wiki-page h3 { font-family:var(--display); text-transform:none; letter-spacing:-.03em; font-weight:500; line-height:1.2; }
.wiki-page h1 { font-size:clamp(2.35rem,4.5vw,3.8rem); }
.wiki-page h2 { font-size:1.35rem; }
.wiki-page h3 { font-size:1.1rem; }
.wiki-welcome,.wiki-category-heading { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:2.5rem; padding:2.75rem; border:1px solid #dedfce; border-radius:1.5rem; background:var(--surface); margin-bottom:1.5rem; overflow:hidden; box-shadow:var(--shadow); }
.wiki-welcome img,.wiki-category-heading img { width:100%; height:auto; border-radius:1rem; }
.wiki-welcome .listing-copy,.wiki-category-heading .listing-copy { margin:0 0 1rem; line-height:1.7; }
.wiki-text-link { color:var(--coral-dark); font-weight:750; text-decoration:none; }
.wiki-search { margin-bottom:1.5rem; padding:1.25rem 1.5rem; border-radius:var(--radius); background:#edf2e6; border:1px solid #dce5d1; }
.wiki-search label { color:var(--ink); font-weight:750; }
.wiki-search input { border-radius:.6rem; background:var(--surface); }
.wiki-search button { border-radius:.6rem; }
.wiki-quick-start { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; padding:.5rem 0 2rem; font-size:.85rem; }
.wiki-quick-start > span { font-weight:750; }
.wiki-quick-start a { padding:.55rem .85rem; border:1px solid #ddd9e7; border-radius:2rem; text-decoration:none; background:#f5f1f8; color:#625574; }
.wiki-section-heading { margin-bottom:1.5rem; scroll-margin-top:7rem; }
.wiki-section-heading h2 { margin-bottom:.5rem; font-size:1.8rem; }
.wiki-section-heading p { color:var(--muted); }
.wiki-category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.wiki-category-card { padding:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); display:flex; flex-direction:column; box-shadow:var(--shadow); transition:border-color .15s,box-shadow .15s; }
.wiki-category-card img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.wiki-category-card > div { padding:1.3rem; display:flex; flex-direction:column; flex:1; }
.wiki-category-card h2 { font-size:1.5rem; margin:.55rem 0 .75rem; }
.wiki-category-card p { line-height:1.65; margin-bottom:1rem; }
.wiki-category-card strong { margin-top:auto; padding-top:.85rem; border-top:1px solid #e6e6d9; color:var(--coral-dark); font-size:.8rem; font-weight:600; }
.wiki-category-card span { text-transform:none; letter-spacing:0; }
.wiki-category-card:hover,.wiki-category-card:focus-visible { transform:none; border-color:#b0c0a3; box-shadow:0 12px 30px #426a5912; }
.wiki-section-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 1.5rem; }
.wiki-section-nav a { padding:.6rem .8rem; font-size:.8rem; border-radius:2rem; border:1px solid var(--line); text-decoration:none; }
.wiki-section-nav a[aria-current="page"] { background:var(--coral); color:#fffdf8; border-color:var(--coral); }
.wiki-article-list { gap:.75rem; }
.wiki-article-card { padding:1.25rem 1.5rem; border-radius:.85rem; }
.wiki-article-card h2 { margin-bottom:.5rem; }
.wiki-article-card p { line-height:1.65; }
.wiki-article-card .eyebrow { font-size:.65rem; margin-bottom:.5rem; }
.wiki-article-layout { grid-template-columns:minmax(0,1fr) 16rem; gap:1.5rem; }
.wiki-prose { border-radius:1rem; padding:clamp(1.25rem,4vw,3rem); line-height:1.8; }
.wiki-prose header { padding-bottom:1.5rem; margin-bottom:2rem; border-bottom:1px solid var(--line); }
.wiki-prose header h1 { font-size:clamp(1.8rem,3.5vw,2.8rem); line-height:1.2; overflow-wrap:normal; }
.wiki-prose h2 { margin-top:2.5rem; scroll-margin-top:7rem; }
.wiki-prose li { margin-bottom:.5rem; }
.wiki-prose pre { border:1px solid #ded9e7; border-radius:.75rem; background:#f0edf5; color:#57466c; font-size:.85rem; }
.wiki-prose :not(pre) > code { padding:.12rem .35rem; border-radius:.3rem; background:#eef1e5; color:#3a5b40; font-size:.88em; }
.wiki-prose img { display:block; max-width:100%; height:auto; margin:1.5rem auto .5rem; border:1px solid var(--line); border-radius:.5rem; }
.wiki-prose a { text-underline-offset:.2em; }
.wiki-sidebar .panel { border-radius:.9rem; padding:1.3rem; background:#f8f8ef; }
.wiki-toc summary { cursor:pointer; font-weight:750; margin-bottom:.75rem; }
.wiki-sidebar h2 { font-size:1rem; }
.wiki-sidebar a { font-size:.85rem; line-height:1.5; }
:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
@media (max-width:1000px) {
  .wiki-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wiki-article-layout { grid-template-columns:minmax(0,1fr); }
  .wiki-sidebar { position:static; order:-1; }
  .wiki-related { display:none; }
  .wiki-toc ol { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  main,footer { width:calc(100% - 2rem); }
  .site-header { top:.5rem; width:calc(100% - 1.5rem); padding:.15rem .9rem; margin:.5rem auto 1.25rem; min-height:4.5rem; border-radius:.85rem; }
  .brand img { width:80px; height:60px; }
  .mobile-menu { display:block; position:relative; }
  .mobile-menu > summary { cursor:pointer; padding:.7rem 1rem; border:1px solid var(--line); border-radius:.6rem; }
  .site-header .mobile-menu nav { display:grid; position:absolute; right:0; top:3.5rem; width:14rem; padding:1rem; gap:1rem; border:1px solid var(--line); background:var(--surface); border-radius:.75rem; box-shadow:0 1rem 2rem #14253620; }
  h1,.listing-page h1,.player-page h1 { font-size:2.6rem; }
  .hero { grid-template-columns:1fr; padding:2rem 1.5rem 1.5rem; gap:1.25rem; min-height:0; border-radius:1.15rem; }
  .hero::before { inset:.6rem; border-radius:.75rem; }
  .hero::after { display:none; }
  .hero-content { padding-left:0; }
  .hero h1 { font-size:2.85rem; }
  .hero-copy { font-size:.95rem; }
  .hero-actions .button { flex:1; }
  .hero-art { min-height:0; }
  .hero-art img { max-height:18rem; object-fit:contain; transform:none; }
  .section-heading { flex-direction:row; flex-wrap:wrap; gap:.6rem; }
  .section-heading h2 { font-size:1.65rem; }
  .home-link,.home-link:nth-child(2),.home-link:nth-child(3) { min-height:14rem; padding-top:7rem; background-position:center,right center; background-size:100% 100%,100% auto; }
  .world-panel { padding:1.75rem; background-size:100% 100%,cover; }
  .world-panel h2 { font-size:1.85rem; }
  main[data-art] > .page-heading { padding:1.5rem; padding-top:6rem; min-height:0; background-size:100% 100%,11rem auto; background-position:center,right top; background-image:linear-gradient(0deg,#fffdf8 40%,#fffdf8ee 60%,#fffdf830),var(--section-art); gap:1rem; }
  .page-heading .ranking-tabs { margin:0; width:100%; }
  .page-heading .page-actions { gap:.5rem; }
  .page-actions .button { padding:.6rem .9rem; }
  .auth-page { background:none; padding:1rem 0 3rem; }
  .auth-card { padding:1.6rem; }
  .auth-card h1 { font-size:2.5rem; }
  .admin-search label > div { flex-wrap:wrap; }
  .admin-search label > div button { flex:1; }
  .wiki-welcome,.wiki-category-heading { grid-template-columns:1fr; padding:1.25rem; gap:1rem; }
  .wiki-welcome img,.wiki-category-heading img { max-height:11rem; object-fit:cover; }
  .wiki-category-grid { grid-template-columns:1fr; }
  .wiki-category-card { display:grid; grid-template-columns:7rem minmax(0,1fr); }
  .wiki-category-card img { height:100%; aspect-ratio:auto; object-fit:cover; }
  .wiki-category-card > div { padding:1rem; }
  .wiki-category-card h2 { font-size:1.1rem; }
  .wiki-category-card p { font-size:.85rem; }
  .wiki-search { padding:1rem; }
  .wiki-quick-start { display:grid; }
  .wiki-toc ol { grid-template-columns:1fr; }
  .wiki-breadcrumbs { flex-wrap:wrap; font-size:.75rem; }
  footer { flex-direction:column; align-items:flex-start; gap:.3rem; }
  footer p { margin:0; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .wiki-category-card,.button { transition:none; }
}

.image-comparison { margin: 1.5rem 0; }
.image-comparison-stage { position: relative; overflow: hidden; border-radius: 1rem; cursor: ew-resize; touch-action: pan-y; }
.wiki-prose .image-comparison-stage img { display: block; width: 100%; max-width: none; margin: 0; border-radius: 0; user-select: none; pointer-events: none; }
.image-comparison-stage img + img { position: absolute; inset: 0; height: 100%; object-fit: contain; }
.image-comparison-divider { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 4px #000; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.7rem; text-shadow: 0 1px 4px #000; }
.image-comparison label { display: grid; gap: .5rem; margin-top: .75rem; font-weight: 600; }
.image-comparison input { width: 100%; cursor: ew-resize; accent-color: var(--accent); }

.ranking-metric-label { display: inline-flex; align-items: center; gap: .45rem; }
.ranking-stat-icon { display: inline-block; flex: 0 0 2rem; width: 2rem; height: 2rem; background-image: url('/static/img/rigel/ranking-stats.webp'); background-size: 400% 300%; }
.ranking-stat-rating { background-position: 0 0; }
.ranking-stat-kills { background-position: 33.333% 0; }
.ranking-stat-deaths { background-position: 66.667% 0; }
.ranking-stat-damage { background-position: 100% 0; }
.ranking-stat-received { background-position: 0 50%; }
.ranking-stat-healing { background-position: 33.333% 50%; }
.ranking-stat-support { background-position: 66.667% 50%; }
.ranking-stat-objectives { background-position: 100% 50%; }
.ranking-stat-matches { background-position: 0 100%; }
.ranking-stat-wins { background-position: 33.333% 100%; }
.ranking-stat-losses { background-position: 66.667% 100%; }
.ranking-stat-deserters { background-position: 100% 100%; }

.ranking-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.ranking-filters label { display: grid; gap: .4rem; flex: 1 1 12rem; }
.ranking-player-list { display: grid; gap: 1rem; }
.ranking-player { padding: 0; overflow: hidden; }
.ranking-player-summary { display: grid; grid-template-columns: 64px minmax(8rem,1.4fr) repeat(3,minmax(5rem,.7fr)) minmax(7rem,1fr) auto; align-items: center; gap: .8rem; padding: 1rem; cursor: pointer; }
.ranking-player-summary::marker { content: ''; }
.ranking-player-summary::-webkit-details-marker { display: none; }
.ranking-player-summary > span:not(.ranking-player-guild) { display: grid; gap: .2rem; }
.ranking-face { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.ranking-player-name::after { content: ' ▾'; }
.ranking-player[open] .ranking-player-name::after { content: ' ▴'; }
.ranking-player-guild { display: flex; gap: .5rem; align-items: center; overflow-wrap: anywhere; }
.ranking-player-breakdown { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 1rem; padding: 1.25rem; border-top: 1px solid var(--line); }
.ranking-body { display: grid; justify-items: center; align-content: start; gap: .75rem; }
.ranking-body .character-sprite { width: auto; max-width: 160px; height: 200px; object-fit: contain; image-rendering: pixelated; }
.ranking-player-breakdown .detail-grid { margin: 0; }
.ranking-log-dialog { width: min(1100px,94vw); max-height: 88vh; padding: 1rem; border: 1px solid var(--line); border-radius: 1.25rem; color: var(--ink); background: var(--surface); }
.ranking-log-dialog::backdrop { background: rgb(15 25 20 / .65); }
.ranking-log-dialog > form { display: flex; justify-content: end; }
.ranking-log-dialog main { width: auto; margin: 1rem 0; padding: 0; }
@media (max-width: 1100px) { .ranking-player-summary { grid-template-columns: 64px minmax(8rem,1fr) repeat(3,minmax(4rem,.7fr)); } .ranking-player-guild { grid-column: 2 / 4; } .ranking-log-link { grid-column: 4 / 6; } }
@media (max-width: 600px) { .ranking-player-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; } .ranking-face { width: 48px; height: 48px; } .ranking-player-name { grid-column: 2 / 4; } .ranking-player-guild { grid-column: 1 / 3; } .ranking-log-link { grid-column: 3; padding: .5rem; font-size: .8rem; } .ranking-player-breakdown { grid-template-columns: 1fr; } }
.ranking-filters input,.ranking-filters select { min-height: 2.75rem; width: 100%; border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .75rem; background: var(--surface); color: var(--ink); font: inherit; }
.ranking-filters button,.ranking-log-dialog > form button { min-height: 2.75rem; border: 1px solid var(--line); border-radius: .6rem; padding: .5rem 1rem; background: var(--mint); color: var(--ink); font: inherit; cursor: pointer; }
.ranking-event-filters { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.ranking-event-filters .ranking-filters { margin-bottom: 0; }
.ranking-dialog-content { min-width: 0; }
.ranking-dialog-content .detail-grid { grid-template-columns: repeat(auto-fit,minmax(min(12rem,100%),1fr)); }
.ranking-dialog-content .character-detail-heading { flex-wrap: wrap; }
.ranking-guild { display: inline-flex; align-items: center; gap: .6rem; }
@media (max-width: 600px) { .ranking-log-dialog { padding: .75rem; } .ranking-filters label { min-width: 0; } .ranking-event-filters .ranking-filters { align-items: stretch; } }

.ranking-combat-grid, .ranking-dialog-content .ranking-combat-grid { display:flex; flex-wrap:wrap; gap:1px; }
.ranking-combat-grid > div { flex:1 1 12rem; min-width:0; }
@media (max-width:600px) { .ranking-combat-grid > div { flex-basis:calc(50% - 1px); padding:1rem; } }

.ranking-consumables-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr)); gap:1px; margin-top:1rem; }
.detail-grid .ranking-supply-item { display:flex; align-items:center; gap:.55rem; margin-top:.7rem; padding:0; background:none; }
.ranking-supply-item img { width:36px; height:36px; object-fit:contain; flex-shrink:0; }
.detail-grid .ranking-supply-item span { font-size:.8rem; text-transform:none; letter-spacing:0; }
.ranking-supply-item small { display:block; color:var(--muted); font-size:.65rem; }
.detail-grid .ranking-supply-item strong { margin-left:auto; font-size:1.1rem; }
.ranking-recovery { margin:.6rem 0 0; display:grid; gap:.35rem; }
.detail-grid .ranking-recovery > div { display:flex; align-items:baseline; justify-content:space-between; padding:0; gap:1rem; background:none; }
.ranking-recovery dt { font-size:.8rem; color:var(--muted); }
.ranking-recovery dd { margin:0; font-size:1.25rem; font-weight:650; font-variant-numeric:tabular-nums; }