/* A quieter, editorial system: color and motion mark meaning, not decoration. */
:root {
  --bg: #171816;
  --panel: #21221f;
  --panel2: #292a26;
  --line: #393a35;
  --text: #f1eee5;
  --muted: #abaea3;
  --gold: #d2b882;
  --gold-hot: #e5cca0;
  --teal: #91baa1;
  --red: #de9387;
  --success: #91baa1;
  --defeat: #de9387;
  --serif: 'Noto Sans JP', 'Yu Gothic', sans-serif;
}

body {
  background: #171816;
  background-image: repeating-linear-gradient(0deg, #ffffff03 0, #ffffff03 1px, transparent 1px, transparent 4px);
  color: var(--text);
}
body:before { opacity: 0 !important; animation: none !important; }
.topbar:after, .hero:before, .hero:after { display: none; }
.brand-mark { box-shadow: none; transition: color .2s, border-color .2s; }
.brand:hover .brand-mark { transform: none; border-radius: 0; box-shadow: none; color: var(--text); }
.status-dot { animation: none; box-shadow: none; }
.top-status { color: var(--muted); }
#app[data-page] .page { animation: fade-up .25s ease-out both; filter: none; }
.hero h1 { background: none; color: var(--text); text-shadow: none; font-family: 'Yu Mincho', 'Noto Serif JP', serif; font-weight: 600; }
.sigil { box-shadow: none; animation: none; background: transparent; }
.sigil:before, .sigil:after, .sigil span { animation: none; }
.sigil span { text-shadow: none; }
.button { border-radius: 3px; box-shadow: none; transition: background .18s, color .18s, border-color .18s; }
.button:before { display: none; }
.button:hover { filter: none; transform: none; box-shadow: none; }
.button:active { transform: translateY(1px); }
.button.secondary { color: var(--gold); }
.button.ghost { color: var(--muted); }
.panel, .character-card, .online-arena-panel, .fighter, .compare-panel, .playback-controls, .log {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: none;
  border-radius: 3px;
}
.character-card { animation: fade-up .3s ease-out both; }
.character-card:before, .character-card:after { display: none; }
.feature, .roster-row { border-radius: 0; box-shadow: none; }
.roster-row { transition: border-color .18s, background .18s; }
.roster-row:hover { transform: none; background: var(--panel2); border-color: #55564e; }
.roster-row:before { display: none; }
.tag, .rank-badge { border-radius: 2px; box-shadow: none; background: transparent; }
.rank-badge { color: var(--gold); border-color: #74684f; }
.section-head h2, .arena-page-heading h2 { color: var(--text); font-family: 'Yu Mincho', 'Noto Serif JP', serif; letter-spacing: .02em; }
.eyebrow { color: var(--muted); letter-spacing: .12em; }
.epithet { text-shadow: none; letter-spacing: .06em; }
.skill { border-radius: 0; }
.bottom-nav { background: #171816f2; box-shadow: none; backdrop-filter: none; }
.bottom-nav button:hover, .bottom-nav button.active span { text-shadow: none; transform: none; }
.bottom-nav button.active:after { box-shadow: none; }
.toast { border-radius: 3px; box-shadow: none; backdrop-filter: none; }
.account-dialog { border-radius: 3px; box-shadow: 0 18px 54px #0008; background: #21221f; }
.fighter { animation: fade-up .3s ease-out both; }
.fighter:before { display: none; }
.fighter.right { animation-delay: .08s; }
.battle-head .vs { animation: none; text-shadow: none; }
.bar i:after { display: none; }
.battle-page .log { box-shadow: none; }
.battle-page.result-win .battle-result-head h2 { color: var(--success); }
.battle-page.result-lose .battle-result-head h2 { color: var(--defeat); }
.battle-page.result-draw .battle-result-head h2 { color: var(--muted); }

/* Arena: the entered fighter and the outcome are the first things to read. */
.arena-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 12px 0 21px; }
.arena-page-heading h2 { font-size: 29px; margin: 3px 0 0; }
.arena-rank { display: flex; align-items: end; gap: 13px; color: var(--muted); font-size: 11px; }
.arena-rank b { color: var(--text); font: 500 25px/1 'DM Mono', monospace; }
.arena-rank small { color: var(--muted); font: 10px var(--serif); }
.online-arena-panel { padding: 19px 20px 16px; border-top: 2px solid #81765d; }
.online-arena-top { align-items: end; }
.arena-entry-block > .eyebrow { margin: 0 0 9px; }
.online-entry { display: flex; align-items: center; gap: 15px; margin: 0; }
.online-entry-avatar { width: 92px; height: 92px; flex: none; overflow: hidden; border: 1px solid #57574f; background: #2a2a25; }
.online-entry-avatar .portrait-art { display: block; width: 100%; height: 100%; }
.online-entry-copy { min-width: 0; }
.online-entry-copy .roster-name { font-size: 20px; line-height: 1.35; }
.online-entry-copy .roster-epithet { color: var(--gold); margin-top: 4px; }
.online-entry-copy .roster-meta { margin-top: 5px; }
.online-meters { gap: 0; border-left: 1px solid var(--line); }
.online-meter { min-width: 104px; padding: 7px 14px; text-align: left; background: transparent; border: 0; border-radius: 0; }
.online-meter + .online-meter { border-left: 1px solid var(--line); }
.online-meter span { color: var(--muted); font-size: 10px; }
.online-meter b { margin-top: 3px; color: var(--text); font: 500 18px 'DM Mono', monospace; }
.online-meter small { color: var(--muted); }
.online-arena-actions { align-items: center; margin-top: 17px; }
.online-arena-actions .button { min-height: 42px; }
.arena-share-reset { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.arena-share-reset .button { min-height: 36px; font-size: 12px; }
.arena-share-reset .button:disabled { opacity: .58; cursor: default; }
.arena-share-reset small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.arena-share-reset-copy { display: grid; flex: 1 1 220px; gap: 3px; }
.arena-share-reset-copy b { color: var(--text); font-size: 12px; }
.arena-share-reset-copy span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.arena-hint { margin-top: 13px; color: var(--muted); font-size: 11px; }
.arena-history-head { margin: 31px 0 10px; align-items: end; }
.arena-history-head h2 { font-size: 20px; }
.arena-history-head p { margin-top: 2px; }
.history-count { color: var(--muted); font: 11px 'DM Mono', monospace; }
.arena-history { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.arena-match { --outcome: var(--muted); position: relative; padding: 12px 15px 10px; background: var(--panel); border-left: 3px solid var(--outcome); }
.arena-match.result-win { --outcome: var(--success); background: #202720; }
.arena-match.result-lose { --outcome: var(--defeat); background: #29211f; }
.arena-match.result-draw { --outcome: #b5b0a6; }
.match-fighters { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: center; gap: 12px; }
.match-fighter { min-width: 0; display: flex; align-items: center; gap: 10px; }
.match-fighter.foe { flex-direction: row-reverse; text-align: right; }
.match-avatar { width: 44px; height: 44px; flex: none; overflow: hidden; border: 1px solid #55564f; background: #292a26; }
.match-avatar .portrait-art { width: 100%; height: 100%; }
.match-fighter-copy { min-width: 0; display: grid; gap: 2px; }
.match-fighter-copy b { overflow: hidden; color: var(--text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.match-fighter-copy small { color: var(--muted); font-size: 10px; }
.match-result { display: grid; justify-items: center; gap: 1px; color: var(--outcome); font-size: 12px; font-weight: 700; }
.match-result small { color: #77796f; font: 9px 'DM Mono', monospace; }
.match-meta { display: flex; align-items: center; gap: 10px; min-height: 17px; margin: 7px 0 0 57px; color: var(--muted); font-size: 10px; }
.match-meta time, .match-meta > span:first-of-type { font-variant-numeric: tabular-nums; }
.match-rating { margin-left: auto; font: 11px 'DM Mono', monospace; }
.match-rating.up { color: var(--success); }
.match-rating.down { color: var(--defeat); }
.arena-history-empty { border-top: 1px solid var(--line); padding: 18px 2px; color: var(--muted); font-size: 12px; }
.arena-avatar-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gold); font-family: 'Yu Mincho', serif; }

@media (max-width: 650px) {
  .arena-page-heading { margin: 5px 0 16px; }
  .arena-page-heading h2 { font-size: 25px; }
  .arena-rank b { font-size: 21px; }
  .online-arena-panel { padding: 14px 12px 12px; }
  .online-arena-top { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .online-entry-avatar { width: 70px; height: 70px; }
  .online-entry-copy .roster-name { font-size: 17px; }
  .online-meters { border-left: 0; border-top: 1px solid var(--line); }
  .online-meter { flex: 1; min-width: 0; padding: 8px 10px 0; }
  .online-meter:first-child { padding-left: 0; }
  .match-fighters { grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr); gap: 6px; }
  .arena-match { padding: 10px 9px 8px; }
  .match-avatar { width: 35px; height: 35px; }
  .match-fighter { gap: 6px; }
  .match-fighter-copy b { font-size: 11px; }
  .match-fighter-copy small { font-size: 9px; }
  .match-meta { margin-left: 41px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  #app[data-page] .page, .fighter { animation: none; }
}

.rank-badge { display: inline-flex; align-items: center; gap: 5px; }
.rank-emblem { display: block; width: 32px; height: 32px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 7px #0008); }
.rank-emblem[src$="/silver.webp"] { clip-path: inset(0 0 14%); }
.arena-rank-emblem { width: 52px; height: 52px; margin: 0 1px 1px 0; }
.leaderboard-rank-tier { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.leaderboard-rank-emblem { width: 22px; height: 22px; }
@media (max-width: 650px) {
  .arena-rank-emblem { width: 42px; height: 42px; }
  .leaderboard-rank-emblem { width: 20px; height: 20px; }
}

.match-stat-details>summary small{font-size:11px}
.match-stat-popover>b{font-size:12px}
.match-stat-row{font-size:11px}
.match-stat-row b{font-size:11px}
.match-stat-skills span,.match-stat-ultimate{font-size:11px}
.match-stat-skills small{font-size:10px}
@media(max-width:560px){.match-stat-details>summary small{font-size:10px}}

/* Readability overrides: this stylesheet loads after the motion and online layers. */
.skill p{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:13px;line-height:1.6}
.stat-bars.compact .stat-label{font-size:11px}
.ultimate-card p{font-size:13px;line-height:1.65}
.ultimate-card small{font-size:12px;line-height:1.6}
.leaderboard-ultimate small{font-size:12px;line-height:1.55}
.input-hint{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.character-quick-actions{display:flex;flex-wrap:wrap;gap:8px}
.character-quick-actions .button{min-height:42px}
@media(max-width:560px){.skill p,.ultimate-card p{font-size:12px}.ultimate-card small,.leaderboard-ultimate small{font-size:11px}.stat-bars.compact .stat-label{font-size:10px}}