/* Layout and components. All theme colors and geometry use tokens.css. */
* { box-sizing: border-box; }
html { scroll-padding-bottom: 20px; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--font-md)/1.6 var(--font-ui); font-synthesis: none; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; border-radius: var(--radius-md); }
button { cursor: pointer; border: 0; }
button, a, input, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, input, select { min-height: var(--touch-target); }
button { transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease); }
button:active:not(:disabled), .shortcut:active { transform: translateY(1px); background-color: var(--panel2); }
button:disabled { opacity: .65; cursor: wait; }
:is(button, a, input, select):focus-visible { outline: 2px solid var(--interactive); outline-offset: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip { position: fixed; top: -80px; left: 16px; background: var(--accent); color: var(--on-accent); padding: 12px; z-index: 100; border-radius: var(--radius-sm); }
.skip:focus { top: 10px; }
.header { position: sticky; top: 0; z-index: var(--z-header); height: 76px; border-bottom: 1px solid var(--line); background: var(--bg); }
.header-inner { max-width: var(--content-width); padding: 0 var(--gutter); margin: auto; height: 100%; display: flex; align-items: center; gap: clamp(24px, 5vw, 70px); }
.brand { display: flex; align-items: center; min-height: 44px; font-size: 30px; font-weight: 800; letter-spacing: -1.5px; }
.brand img { display: none; }
.brand-dot, .accent { color: var(--accent); }
.desktop-nav { display: flex; align-self: stretch; gap: 30px; }
.desktop-nav a { display: flex; align-items: center; justify-content: center; color: var(--muted); position: relative; font-size: var(--font-sm); font-weight: 600; white-space: nowrap; min-height: 44px; min-width: 44px; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--text); }
.desktop-nav a.active::after { content: ''; position: absolute; bottom: 0; height: 2px; background: var(--accent); width: 100%; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.region-label { font-size: 10px; letter-spacing: 1px; white-space: nowrap; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; background: var(--victory); border-radius: 50%; flex-shrink: 0; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--line); height: 44px; min-width: 44px; padding: 0 10px; font-size: 13px; }
.icon-button:hover { border-color: var(--muted); }
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); min-height: 0; background: var(--hero-bg); color: var(--hero-text); }
.hero-art { position: absolute; inset: 0 0 0 29%; background: url('/assets/ahri-splash.jpg') 55% 35% / cover no-repeat; opacity: .65; }
.hero-shade { position: absolute; inset: 0; background: var(--hero-mask); }
.hero-inner { max-width: var(--content-width); margin: auto; padding: 40px var(--gutter); position: relative; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 1.7px; font-weight: 600; color: var(--hero-muted); }
h1 { font-size: var(--font-hero); line-height: 1.22; letter-spacing: -1.4px; margin: 20px 0 16px; font-weight: 750; }
h1 > span { color: var(--hero-text); }
.hero.compact { min-height: 0; }
.hero.compact .hero-inner { padding-top: 24px; padding-bottom: 24px; }
.hero.compact h1 { font-size: 25px; margin: 0 0 20px; }
.hero.compact h1 br { display: none; }
.hero.compact h1 > span::before { content: ' '; }
.hero.compact :is(.eyebrow, .hero-description, .hero-bottom, .recent, .art-credit) { display: none; }
.search-form { margin-inline: auto; display: flex; max-width: 740px; min-height: 64px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px; }
.search-form:focus-within { border-color: var(--interactive); }
.server-select { width: 148px; flex-shrink: 0; padding: 0 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.server-select > span { font-size: 10px; letter-spacing: 1px; color: var(--muted); line-height: 1.1; }
.server-select select { border: none; background: var(--panel); font-size: 12px; font-weight: 600; width: 100%; margin-left: -4px; min-height: 44px; }
.search-input-wrap { display: flex; align-items: center; flex: 1; min-width: 0; padding: 0 16px; }
.search-input-wrap input { width: 100%; border: none; background: transparent; color: var(--text); font-size: 16px; min-width: 0; }
input::placeholder { color: var(--muted); opacity: 1; }
kbd { font: 10px/1.5 var(--font-ui); border: 1px solid var(--line); padding: 1px 5px; border-radius: var(--radius-sm); color: var(--muted); white-space: nowrap; }
.search-submit { background: var(--accent); color: var(--on-accent); padding: 0 20px; font-weight: 700; font-size: 20px; white-space: nowrap; min-width: 54px; }
.search-submit:hover { filter: brightness(1.08); }
.search-submit:active:not(:disabled) { background: var(--accent); }
.search-submit span { font-size: var(--font-sm); margin-right: 12px; }
.recent { max-width: 740px; margin-inline: auto; display: flex; gap: 14px; font-size: var(--font-xs); color: var(--hero-muted); margin-top: 12px; align-items: center; min-height: 44px; }
.recent > span { flex-shrink: 0; }
.recent > div { display: flex; gap: 8px; flex-wrap: wrap; }
.recent button { background: var(--panel); color: var(--text); padding: 8px 10px; font-size: var(--font-xs); border: 1px solid var(--line); }
.muted { color: var(--muted); }
.hero .recent .muted { color: var(--hero-muted); }
.page-content { max-width: var(--content-width); margin: auto; padding: 0 var(--gutter); }
.shortcut-icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--muted); font-size: 26px; }
.shortcut-icon, .mobile-nav svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.subtle { font-size: 10px; color: var(--muted); letter-spacing: 1.5px; }
.section-heading h2 { font-size: var(--font-section); letter-spacing: -.7px; margin: 6px 0 0; font-weight: 700; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--font-xs); color: var(--interactive); white-space: nowrap; }
.text-link span { margin-left: 12px; }
.catalog-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; }
.filters { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.filter { display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: var(--font-sm); background: transparent; padding: 8px 12px; white-space: nowrap; border: 1px solid transparent; min-width: 44px; flex-shrink: 0; }
.filter.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.filter:hover { color: var(--text); }
.catalog-search { display: flex; align-items: center; background: var(--panel); border: 1px solid var(--line); padding: 0 12px; border-radius: var(--radius-md); gap: 8px; width: 220px; flex-shrink: 0; }
.catalog-search:focus-within { border-color: var(--interactive); }
.catalog-search > span { font-size: 22px; color: var(--muted); line-height: 1; }
.catalog-search input { width: 100%; min-width: 0; border: none; background: transparent; font-size: var(--font-sm); }
.catalog-search kbd { font-size: 9px; }
.champion-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.champion-card { position: relative; display: block; text-align: left; background: var(--panel); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; min-width: 0; }
.champion-card:hover { border-color: var(--muted); }
.champion-image { position: relative; aspect-ratio: .82; overflow: hidden; background: var(--panel2); border-radius: var(--radius-sm); }
.champion-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; transition: transform var(--motion-normal) var(--ease); }
@media (hover: hover) { .champion-card:hover img { transform: scale(1.025); } }
.champion-label { padding: 11px; }
.champion-label strong { font-size: var(--font-md); display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champion-label small { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.champion-number { position: absolute; top: 8px; left: 8px; padding: 1px 5px; font-size: 9px; color: var(--hero-text); background: var(--hero-bg); border-radius: var(--radius-sm); }
.catalog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-size: 11px; color: var(--muted); }
.catalog-footer > span:last-child { letter-spacing: .5px; font-size: 9px; display: flex; align-items: center; gap: 7px; }
footer { max-width: var(--content-width); margin: auto; padding: 28px var(--gutter) 20px; }
.footer-top { display: flex; align-items: center; gap: 24px; }
.footer-top .brand { font-size: 25px; }
.footer-top > span { font-size: var(--font-xs); color: var(--muted); }
.footer-top > a:last-child { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-size: var(--font-xs); color: var(--interactive); }
footer > p { font-size: 11px; line-height: 1.8; color: var(--muted); max-width: 850px; margin: 16px 0; }
#search-feedback:not(:empty) { max-width: 740px; background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); padding: 12px; margin-top: 10px; border-radius: var(--radius-sm); font-size: var(--font-sm); }
#search-feedback.pending:not(:empty) { background: var(--panel); color: var(--muted); border-color: var(--line); }
.empty { grid-column: 1 / -1; padding: 36px 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-md); }
.empty h2 { font-size: 22px; color: var(--text); }
.empty p { max-width: 520px; margin: 12px auto; }
.empty a, .primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--radius-sm); font-size: var(--font-sm); font-weight: 650; }
.primary:active:not(:disabled) { background: var(--accent); filter: brightness(.92); }
.item-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.item-card { display: flex; align-items: center; gap: 12px; padding: 14px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 0; }
.item-card:hover { border-color: var(--muted); }
.item-card img { width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0; }
.item-card > span { min-width: 0; overflow-wrap: anywhere; }
.item-card strong { font-size: var(--font-xs); display: block; }
.item-card small { font-size: 11px; color: var(--muted); display: block; }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg); width: min(720px, calc(100% - 32px)); max-height: 85dvh; padding: 0; overscroll-behavior: contain; }
dialog::backdrop { background: var(--backdrop); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-toolbar { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 8px 12px 8px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--font-sm); }
.dialog-close { flex-shrink: 0; }
.detail-cover { display: block; width: 100%; height: 230px; object-fit: cover; object-position: center 25%; }
.detail-body { padding: 24px; overflow-wrap: anywhere; }
.detail-body .eyebrow { color: var(--muted); }
.detail-body h2 { font-size: 28px; margin: 4px 0 12px; line-height: 1.3; }
.detail-body p { color: var(--muted); font-size: var(--font-sm); }
.tag { display: inline-block; padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--font-xs); margin-right: 5px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.stat-cell { background: var(--bg); padding: 12px; border-radius: var(--radius-sm); font-size: var(--font-xs); color: var(--muted); }
.stat-cell strong { display: block; font-size: 20px; color: var(--text); }
.detail-item { width: 64px; height: 64px; border-radius: var(--radius-sm); }
.spell { padding: 16px 0; border-top: 1px solid var(--line); display: flex; gap: 14px; }
.spell img { width: 44px; height: 44px; border-radius: var(--radius-sm); flex-shrink: 0; }
.spell > div { min-width: 0; flex: 1; }
.spell strong { font-size: var(--font-md); }
.spell p { margin: 4px 0; font-size: var(--font-sm); }
.spell small { font-size: var(--font-xs); }
.detail-source { font-size: 11px; color: var(--muted); margin-top: 18px; }
.favorite-row, .profile-header { display: flex; align-items: center; gap: 16px; background: var(--panel); padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); margin: 16px 0; }
.favorite-row > a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.favorite-row strong { font-size: 18px; }
.favorite-row small { display: block; color: var(--muted); font-size: var(--font-xs); }
.profile-header img { width: 70px; height: 70px; border-radius: var(--radius-md); }
.profile-header > div { min-width: 0; overflow-wrap: anywhere; }
.profile-header h2 { margin: 0; font-size: 24px; }
.profile-header p { margin: 4px 0; color: var(--muted); font-size: var(--font-xs); }
.profile-header button { margin-left: auto; }
.rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rank-card { border: 1px solid var(--line); background: var(--panel); padding: 20px; border-radius: var(--radius-md); }
.rank-card strong { font-size: 22px; }
.rank-card p { font-size: var(--font-xs); color: var(--muted); }
.match-row { display: flex; align-items: center; gap: 14px; background: var(--victory-soft); border: 1px solid var(--line); border-left: 3px solid var(--victory); border-radius: var(--radius-sm); margin: 8px 0; padding: 14px; }
.match-row.loss { border-left-color: var(--defeat); background: var(--defeat-soft); }
.match-row > img { width: 44px; height: 44px; border-radius: var(--radius-sm); }
.match-info { min-width: 92px; }
.match-info strong { color: var(--victory); font-size: var(--font-xs); }
.loss .match-info strong { color: var(--defeat); }
.match-info small { display: block; color: var(--muted); font-size: 11px; }
.match-kda { font-size: 18px; min-width: 100px; }
.match-kda small { font-size: 11px; display: block; color: var(--muted); }
.match-items { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.match-items img { height: 28px; width: 28px; border-radius: var(--radius-sm); }
.match-extra { font-size: var(--font-xs); color: var(--muted); }
.match-details { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--panel2); padding: 16px; font-size: var(--font-xs); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.profile-meta { font-size: var(--font-xs); color: var(--muted); margin: 18px 0; }
#profile-section { padding-top: 24px; }
#profile-section h3 { margin-top: 24px; font-size: 17px; }
#profile-section h3 .muted { font-size: var(--font-sm); font-weight: 400; }
#favorites-section { padding-top: 28px; }
.about { max-width: 800px; margin: 0 auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.about .eyebrow { color: var(--muted); }
.about h2 { font-size: 26px; }
.about h3 { margin-top: 24px; }
.about p { color: var(--muted); font-size: var(--font-md); }
.about a { color: var(--interactive); display: inline-block; padding: 10px 0; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 12px 20px; border-radius: var(--radius-md); z-index: var(--z-toast); font-size: var(--font-sm); display: none; max-width: calc(100% - 32px); }
.mobile-nav { display: none; }
.skeleton { background: var(--panel2); border-radius: var(--radius-sm); animation: pulse 1.5s ease-in-out infinite; }
.skeleton-line { display: block; height: 13px; width: 80%; margin: 8px 0; }
.skeleton-line.short { width: 50%; }
.skeleton-heading { height: 24px; width: 65%; }
.skeleton-avatar { width: 70px; height: 70px; flex-shrink: 0; }
.item-card .skeleton-avatar { width: 44px; height: 44px; }
.spell .skeleton-button { width: 44px; flex-shrink: 0; }
.skeleton-copy { flex: 1; }
.skeleton-button { width: 120px; height: 44px; }
.skeleton-card .champion-image { background: var(--panel2); }
.skeleton-card { pointer-events: none; }
.skeleton-rank { min-height: 126px; }
.skeleton-match { height: 92px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; margin-top: 8px; }
@keyframes pulse { 50% { opacity: .45; } }
@media (max-width: 1150px) {
  .region-label { display: none; }
  .desktop-nav { gap: 24px; }
  .champion-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .champion-grid:not(.full) .champion-card:nth-child(n+7) { display: none; }
  .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-toolbar { flex-wrap: wrap; }
  .match-row { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  html { scroll-padding-bottom: 96px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .header { height: 68px; }
  .header-inner { gap: 16px; }
  .brand { font-size: 28px; }
  .desktop-nav { display: none; }
  .header-actions { gap: 8px; }
  .hero { min-height: 0; }
  .hero-inner { padding: 24px var(--gutter); }
  .hero-art { inset: 0; background-position: 62% 20%; opacity: .4; }
  h1 { letter-spacing: -1px; margin-top: 18px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.3px; }
  .search-form { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 5px; padding: 8px; min-height: 120px; }
  .server-select { width: auto; grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; padding: 0 4px 4px; border-right: none; border-bottom: 1px solid var(--line); }
  .server-select > span { font-size: 9px; }
  .server-select select { max-width: 170px; margin-left: 0; font-size: var(--font-xs); }
  .search-input-wrap { padding: 0 4px; }
  .search-input-wrap input { font-size: 16px; }
  .search-input-wrap kbd { display: none; }
  .search-submit { min-width: 44px; padding: 0; }
  .search-submit span { display: none; }
  .recent { gap: 10px; margin-top: 10px; font-size: 11px; }
  .shortcut-icon { width: 24px; height: 24px; }
  .section-heading { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .section-heading h2 { font-size: 23px; }
  .section-heading .text-link { margin-left: auto; }
  .catalog-toolbar { gap: 12px; margin-bottom: 16px; }
  .filters { gap: 4px; flex-wrap: nowrap; overflow-x: auto; width: 100%; padding: 4px 2px 8px; scrollbar-width: thin; scroll-padding: 4px; }
  .filter { font-size: var(--font-xs); padding: 8px 12px; }
  .catalog-search { width: 100%; }
  .catalog-search input { font-size: 16px; }
  .champion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .champion-label { padding: 9px; }
  .champion-label strong { font-size: var(--font-sm); }
  .champion-label small { font-size: 11px; }
  .champion-image { aspect-ratio: .84; }
  .catalog-footer { font-size: 10px; gap: 8px; flex-wrap: wrap; }
  .catalog-footer > span:last-child { font-size: 8px; }
  .footer-top { gap: 12px; flex-wrap: wrap; }
  .footer-top > span { font-size: 11px; }
  .footer-top > a:last-child { font-size: var(--font-xs); margin-left: 0; }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-card { gap: 8px; padding: 12px; }
  .item-card img { width: 36px; height: 36px; }
  .item-card .skeleton-avatar { width: 36px; height: 36px; }
  .item-card strong { font-size: var(--font-xs); }
  dialog { width: calc(100% - 16px); max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); margin: auto; }
  .dialog-toolbar { padding-left: 16px; }
  .detail-cover { height: 170px; }
  .detail-body { padding: 20px 16px; }
  .detail-body h2 { font-size: 26px; }
  .profile-header { padding: 16px; flex-wrap: wrap; gap: 12px; }
  .profile-header img { width: 52px; height: 52px; }
  .profile-header h2 { font-size: 20px; }
  .profile-header button { margin-left: 0; }
  .rank-grid { grid-template-columns: 1fr; }
  .match-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; padding: 12px; }
  .match-info { grid-column: 1 / 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .match-info small { font-size: 10px; }
  .match-row > img { grid-row: 2; grid-column: 1; }
  .match-kda { grid-row: 2; grid-column: 2; min-width: 0; font-size: 18px; }
  .match-extra { grid-column: 1 / -1; grid-row: 4; display: block; font-size: 11px; }
  .match-extra br { display: none; }
  .match-items { grid-row: 3; grid-column: 1 / -1; width: 100%; margin: 0; }
  .match-row > button { grid-row: 1 / 3; grid-column: 3; }
  .stat-grid { gap: 8px; }
  .stat-cell { padding: 10px 8px; }
  .stat-cell strong { font-size: 18px; }
  .about { padding: 20px 16px; }
  .hero.compact { min-height: 0; }
  .hero.compact .hero-inner { padding-top: 24px; padding-bottom: 24px; }
  .hero.compact h1 { font-size: 25px; margin: 0 0 20px; line-height: 1.3; }
  .hero.compact .eyebrow, .hero.compact .hero-description, .hero.compact .hero-bottom, .hero.compact .recent { display: none; }
  .hero.compact h1 br { display: none; }
  .hero.compact h1 > span::before { content: ' '; }
  .mobile-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; inset: auto 0 0; z-index: var(--z-nav); background: var(--panel); border-top: 1px solid var(--line); padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .mobile-nav a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-height: 56px; font-size: 11px; color: var(--muted); border-radius: var(--radius-sm); }
  .mobile-nav svg { width: 22px; height: 22px; }
  .mobile-nav a.active { color: var(--accent); background: var(--accent-soft); }
  .mobile-nav a:active { background: var(--panel2); }
  #toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 359px) {
  .champion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-card { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 30px; }
}
@media (min-width: 1600px) {
  .hero-art { left: 35%; background-position: 50% 30%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

#catalog-section { padding-top: 24px; }
.catalog-footer > a { display: inline-flex; align-items: center; min-height: 44px; gap: 5px; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding-top: 16px; }
.about > .primary { margin-right: 20px; }