/* Wuthering Waves Attributes guide. Built on the shared /css/aw-shell.css tokens. */

.aw-attributes-main {
  --aw-guide-gutter: clamp(0.75rem, 2.2vw, 2rem);
  container: attributes-guide / inline-size;
  flex: 1 0 auto;
  min-inline-size: 0;
  inline-size: 100%;
  overflow: clip;
  padding: 1rem var(--aw-guide-gutter) clamp(3rem, 7vw, 5.5rem);
  color: hsl(var(--foreground));
}

.aw-attributes-main > :where(.aw-guide-breadcrumb, .aw-guide-hero, .aw-guide-toc, .aw-attributes-section, .aw-guide-end-links, noscript) {
  inline-size: 100%;
  margin-inline: auto;
}

.aw-attributes-main :where(button) { font: inherit; }
.aw-attributes-main :where(p, h1, h2, h3, dt, dd) { overflow-wrap: anywhere; }
.aw-attributes-main :where(bdi, [dir="ltr"]) { unicode-bidi: isolate; }

.aw-guide-breadcrumb {
  min-block-size: 1.75rem;
  margin-block-end: 0.55rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.78rem;
  font-weight: 600;
}

.aw-guide-breadcrumb ol {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aw-guide-breadcrumb li { display: inline-flex; align-items: center; min-inline-size: 0; }
.aw-guide-breadcrumb li + li::before { content: "/"; margin-inline: 0.55rem; color: hsl(var(--muted-foreground) / 0.62); font-weight: 400; }
.aw-guide-breadcrumb a { color: hsl(var(--muted-foreground)); transition: color var(--dur-fast) var(--ease); }
.aw-guide-breadcrumb a:hover { color: hsl(var(--foreground)); }
.aw-guide-breadcrumb [aria-current="page"] { overflow: hidden; color: hsl(var(--foreground)); text-overflow: ellipsis; white-space: nowrap; }

.aw-guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  min-block-size: 12rem;
  padding: clamp(1.15rem, 2.5vw, 1.8rem);
}

.aw-guide-hero-copy { max-inline-size: 58rem; }

.aw-guide-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  color: hsl(var(--primary));
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.aw-guide-eyebrow::before { content: ""; flex: 0 0 1.6rem; block-size: 2px; border-radius: 999px; background: hsl(var(--primary)); }
[dir="rtl"] .aw-guide-eyebrow { letter-spacing: 0; }

#aw-attributes-title {
  max-inline-size: 24ch;
  margin: 0;
  font-size: clamp(1.85rem, 4.3vw, 3.45rem);
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

[dir="rtl"] #aw-attributes-title { max-inline-size: 28ch; letter-spacing: 0; line-height: 1.22; }
.aw-guide-intro { max-inline-size: 76ch; margin: 0.72rem 0 0; color: hsl(var(--muted-foreground)); font-size: clamp(0.9rem, 1.2vw, 1rem); line-height: 1.66; }
[dir="rtl"] .aw-guide-intro { line-height: 1.88; }
.aw-guide-byline { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin: 0.8rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.72rem; font-weight: 650; }
.aw-guide-byline time { font-variant-numeric: tabular-nums; }

.aw-attributes-hero-icons {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, clamp(2.8rem, 5vw, 4rem));
  gap: clamp(0.38rem, 1vw, 0.72rem);
  padding: 0.7rem;
  border: 1px solid hsl(var(--border) / 0.62);
  border-radius: calc(var(--radius) + 2px);
  background: hsl(var(--background) / 0.34);
  box-shadow: 0 18px 40px hsl(220 25% 2% / 0.18);
}

.aw-attributes-hero-icon {
  --aw-attribute-rgb: 143 198 220;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgb(var(--aw-attribute-rgb) / 0.26);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--aw-attribute-rgb) / 0.18), transparent 70%);
}

.aw-attributes-hero-icon img { inline-size: 72%; block-size: 72%; object-fit: contain; filter: drop-shadow(0 5px 10px rgb(var(--aw-attribute-rgb) / 0.2)); }
:where([data-attribute="glacio"], [data-attribute-group="glacio"]) { --aw-attribute-rgb: 143 198 220; }
:where([data-attribute="fusion"], [data-attribute-group="fusion"]) { --aw-attribute-rgb: 225 133 95; }
:where([data-attribute="electro"], [data-attribute-group="electro"]) { --aw-attribute-rgb: 180 139 214; }
:where([data-attribute="aero"], [data-attribute-group="aero"]) { --aw-attribute-rgb: 128 195 156; }
:where([data-attribute="spectro"], [data-attribute-group="spectro"]) { --aw-attribute-rgb: 227 208 136; }
:where([data-attribute="havoc"], [data-attribute-group="havoc"]) { --aw-attribute-rgb: 198 106 138; }

.aw-guide-toc {
  display: flex;
  align-items: baseline;
  gap: 0.75rem 1rem;
  margin-block-start: 0.8rem;
  padding: 0.75rem 0;
  border-block: 1px solid hsl(var(--border) / 0.72);
}

.aw-guide-toc strong { flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
[dir="rtl"] .aw-guide-toc strong { letter-spacing: 0; }
.aw-guide-toc ul { display: flex; flex-wrap: wrap; gap: 0.3rem 0.85rem; margin: 0; padding: 0; list-style: none; }
.aw-guide-toc a { display: inline-flex; min-inline-size: 2.75rem; min-block-size: 2.75rem; align-items: center; justify-content: center; color: hsl(var(--foreground) / 0.78); font-size: 0.76rem; font-weight: 700; }
.aw-guide-toc a:hover { color: hsl(var(--primary)); }

.aw-attributes-section {
  min-inline-size: 0;
  padding-block: clamp(1.6rem, 3.8vw, 2.6rem);
  border-block-end: 1px solid hsl(var(--border) / 0.72);
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.aw-attributes-section-head { max-inline-size: 58rem; }
.aw-attributes-section-head h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -0.035em; line-height: 1.2; }
[dir="rtl"] .aw-attributes-section-head h2 { letter-spacing: 0; line-height: 1.5; }
.aw-attributes-section-head > p:last-child { margin: 0.55rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.88rem; line-height: 1.75; }
[dir="rtl"] .aw-attributes-section-head > p:last-child { line-height: 1.95; }
.aw-attributes-kicker { margin: 0 0 0.4rem; color: hsl(var(--primary)); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
[dir="rtl"] .aw-attributes-kicker { letter-spacing: 0; }

.aw-attributes-clarifier {
  max-inline-size: 66rem;
  margin: 1rem 0 0;
  padding: 0.78rem 0.9rem;
  border-inline-start: 3px solid hsl(var(--primary));
  background: hsl(var(--primary) / 0.065);
  color: hsl(var(--foreground) / 0.82);
  font-size: 0.8rem;
  line-height: 1.7;
}

[dir="rtl"] .aw-attributes-clarifier { line-height: 1.9; }

.aw-attributes-reference {
  max-inline-size: 72rem;
  margin: 1rem 0 0;
}

.aw-attributes-reference-viewport {
  overflow: hidden;
  border: 1px solid hsl(var(--border) / 0.78);
  border-radius: var(--radius);
  background: #f8f8f7;
  box-shadow: 0 16px 34px hsl(220 28% 2% / 0.18);
}

.aw-attributes-reference-viewport:focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 3px; }
.aw-attributes-reference picture,
.aw-attributes-reference img { display: block; }
.aw-attributes-reference img { inline-size: 100%; block-size: auto; }
.aw-attributes-reference figcaption { margin-block-start: 0.55rem; color: hsl(var(--muted-foreground)); font-size: 0.72rem; line-height: 1.65; }
[dir="rtl"] .aw-attributes-reference figcaption { line-height: 1.85; }

.aw-attributes-jump-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
  margin-block-start: 1.15rem;
}

.aw-attributes-jump-grid a {
  --aw-attribute-rgb: 143 198 220;
  display: flex;
  min-inline-size: 0;
  min-block-size: 3.15rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgb(var(--aw-attribute-rgb) / 0.36);
  border-radius: var(--radius);
  background: rgb(var(--aw-attribute-rgb) / 0.075);
  color: hsl(var(--foreground));
  font-size: 0.76rem;
  font-weight: 800;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.aw-attributes-jump-grid a:hover { border-color: rgb(var(--aw-attribute-rgb) / 0.7); background: rgb(var(--aw-attribute-rgb) / 0.14); transform: translateY(-1px); }
.aw-attributes-jump-grid a:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.aw-attributes-jump-grid img { flex: 0 0 1.65rem; inline-size: 1.65rem; block-size: 1.65rem; object-fit: contain; }
.aw-attributes-jump-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aw-attributes-data-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  max-inline-size: 66rem;
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px dashed hsl(var(--border));
}

.aw-attributes-overview :where(.aw-attributes-section-head, .aw-attributes-data-note) { max-inline-size: none; }

.aw-attributes-data-note strong { color: hsl(var(--foreground) / 0.88); font-size: 0.75rem; }
.aw-attributes-data-note p { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.76rem; line-height: 1.68; }
[dir="rtl"] .aw-attributes-data-note p { line-height: 1.88; }

.aw-guide-status { min-block-size: 1.55em; margin: 1rem 0 0.2rem; color: hsl(var(--muted-foreground)); font-size: 0.82rem; line-height: 1.55; }
.aw-guide-status[hidden] { display: block; visibility: hidden; }
.aw-guide-status[data-tone="error"] { color: hsl(var(--destructive)); }
html:not(.js) :where(.aw-attributes-directory, .aw-guide-status) { display: none; }
html.js body[data-aw-attributes-language]:has(.aw-attributes-directory[aria-busy="true"]) :where(.aw-guide-end-links, .aw-footer) { display: none; }

.aw-attributes-directory { min-inline-size: 0; }
.aw-attribute-group { --aw-attribute-rgb: 143 198 220; min-inline-size: 0; padding-block: clamp(1.35rem, 3vw, 2rem); scroll-margin-top: calc(var(--header-height) + 1rem); }
.aw-attribute-group + .aw-attribute-group { border-block-start: 1px solid hsl(var(--border) / 0.72); }

.aw-attribute-group-head {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.85rem;
}

.aw-attribute-group-head > img {
  inline-size: 3rem;
  block-size: 3rem;
  object-fit: contain;
  filter: drop-shadow(0 5px 11px rgb(var(--aw-attribute-rgb) / 0.22));
}

.aw-attribute-group-head h3 { margin: 0.05rem 0 0; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.3; }
.aw-attribute-group-concept { margin: 0; color: hsl(var(--muted-foreground)); font-size: 0.71rem; line-height: 1.45; }
[dir="rtl"] .aw-attribute-group-concept { line-height: 1.7; }

.aw-attribute-count {
  display: inline-flex;
  min-block-size: 1.8rem;
  align-items: center;
  padding-inline: 0.58rem;
  border: 1px solid rgb(var(--aw-attribute-rgb) / 0.38);
  border-radius: 999px;
  background: rgb(var(--aw-attribute-rgb) / 0.08);
  color: hsl(var(--foreground));
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.aw-attribute-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: 0.62rem;
  min-inline-size: 0;
}

.aw-attribute-card,
.aw-attribute-skeleton {
  min-inline-size: 0;
  min-block-size: 5.15rem;
  overflow: hidden;
  border: 1px solid hsl(var(--border) / 0.76);
  border-radius: var(--radius);
  background: hsl(var(--card) / 0.72);
}

.aw-attribute-card {
  position: relative;
  display: grid;
  grid-template-columns: 5.15rem minmax(0, 1fr);
  align-items: stretch;
  color: hsl(var(--card-foreground));
  text-decoration: none;
  isolation: isolate;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

a.aw-attribute-card { cursor: pointer; }
a.aw-attribute-card:hover { border-color: rgb(var(--aw-attribute-rgb) / 0.72); background: hsl(var(--card)); transform: translateY(-2px); }
a.aw-attribute-card:focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 2px; border-color: hsl(var(--ring)); }
.aw-attribute-card.is-coming { background: hsl(var(--card) / 0.46); }

.aw-attribute-card__portrait {
  position: relative;
  display: grid;
  place-items: center;
  min-inline-size: 0;
  overflow: hidden;
  border-inline-end: 1px solid hsl(var(--border) / 0.62);
  background: linear-gradient(145deg, rgb(var(--aw-attribute-rgb) / 0.16), hsl(var(--card-strong)));
}

.aw-attribute-card__image { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease), filter var(--dur-med) var(--ease); }
a.aw-attribute-card:hover .aw-attribute-card__image { transform: scale(1.045); }
.aw-attribute-card.is-coming .aw-attribute-card__image { filter: grayscale(0.5) saturate(0.62); opacity: 0.8; }
.aw-attribute-card__fallback { display: grid; inline-size: 100%; block-size: 100%; place-items: center; color: hsl(var(--foreground) / 0.68); font-size: 1.25rem; font-weight: 850; }
.aw-attribute-card__fallback[hidden] { display: none; }

.aw-attribute-card__body { display: flex; min-inline-size: 0; flex-direction: column; justify-content: center; gap: 0.38rem; padding: 0.65rem 0.7rem; }
.aw-attribute-card__name { margin: 0; overflow: hidden; color: hsl(var(--card-foreground)); font-size: 0.85rem; font-weight: 800; line-height: 1.3; text-overflow: ellipsis; text-wrap: balance; unicode-bidi: plaintext; }
.aw-attribute-card.is-coming .aw-attribute-card__name { color: hsl(var(--foreground) / 0.74); }
.aw-attribute-card__details { display: flex; min-inline-size: 0; flex-wrap: wrap; align-items: center; gap: 0.26rem 0.48rem; color: hsl(var(--muted-foreground)); font-size: 0.66rem; line-height: 1.25; }
.aw-attribute-card__weapon { display: inline-flex; min-inline-size: 0; align-items: center; gap: 0.24rem; }
.aw-attribute-card__weapon-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-attribute-card__weapon-icon { display: inline-block; flex: 0 0 1rem; inline-size: 1rem; block-size: 1rem; background-position: center; background-repeat: no-repeat; background-size: contain; }
.aw-attribute-card__weapon-icon[data-weapon="sword"] { background-image: url("/images/characters-index/icons/48px/sword-icon.webp?v=20260710-suisui-xuanling-roster1"); }
.aw-attribute-card__weapon-icon[data-weapon="broadblade"] { background-image: url("/images/characters-index/icons/48px/broadblade-icon.webp?v=20260710-suisui-xuanling-roster1"); }
.aw-attribute-card__weapon-icon[data-weapon="pistols"] { background-image: url("/images/characters-index/icons/48px/pistols-icon.webp?v=20260710-suisui-xuanling-roster1"); }
.aw-attribute-card__weapon-icon[data-weapon="gauntlets"] { background-image: url("/images/characters-index/icons/48px/gauntlets-icon.webp?v=20260710-suisui-xuanling-roster1"); }
.aw-attribute-card__weapon-icon[data-weapon="rectifier"] { background-image: url("/images/characters-index/icons/48px/rectifier-icon.webp?v=20260710-suisui-xuanling-roster1"); }
.aw-attribute-card__stars { color: hsl(39 76% 68%); letter-spacing: 0.025em; text-shadow: 0 1px 5px hsl(39 80% 45% / 0.2); unicode-bidi: isolate; }
.aw-attribute-card__version { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.aw-attribute-card__status { color: hsl(39 72% 76%); font-weight: 800; }

.aw-attribute-skeleton { position: relative; background: hsl(var(--card) / 0.56); }
.aw-attribute-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 34%, hsl(var(--foreground) / 0.05) 48%, hsl(var(--foreground) / 0.085) 52%, transparent 66%);
  background-size: 240% 100%;
  animation: aw-attributes-shimmer 1.65s ease-in-out infinite;
}

@keyframes aw-attributes-shimmer { to { background-position: -240% 0; } }

.aw-attributes-terminal { margin-block-start: 1rem; padding: 1rem; border: 1px dashed hsl(var(--border)); border-radius: var(--radius); color: hsl(var(--muted-foreground)); }
.aw-attributes-terminal p { margin: 0; font-size: 0.8rem; line-height: 1.7; }
.aw-attributes-retry,
.aw-attributes-primary-link {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  justify-content: center;
  margin-block-start: 0.8rem;
  padding-inline: 0.85rem;
  border: 1px solid hsl(var(--primary) / 0.7);
  border-radius: var(--radius-sm);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 850;
}

.aw-attributes-retry:hover,
.aw-attributes-primary-link:hover { background: hsl(var(--primary) / 0.86); color: hsl(var(--primary-foreground)); }

.aw-attributes-faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; margin: 0.9rem 0 0; }
.aw-attributes-faq-list > div { min-inline-size: 0; padding: 0.9rem 0; border-block-start: 1px solid hsl(var(--border) / 0.72); }
.aw-attributes-faq-list dt { color: hsl(var(--foreground)); font-size: 0.86rem; font-weight: 800; line-height: 1.5; }
.aw-attributes-faq-list dd { margin: 0.35rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.78rem; line-height: 1.72; }
[dir="rtl"] .aw-attributes-faq-list :where(dt, dd) { line-height: 1.9; }

.aw-guide-end-links { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; padding-block: 1.1rem 0; border-block-start: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 0.77rem; }
.aw-guide-end-links a { display: inline-flex; min-block-size: 2.75rem; align-items: center; color: hsl(var(--foreground) / 0.82); font-weight: 750; }
.aw-guide-end-links a:hover { color: hsl(var(--primary)); }

html.light .aw-attributes-hero-icons { background: hsl(var(--card) / 0.38); box-shadow: 0 14px 28px hsl(28 18% 32% / 0.12); }
html.light .aw-attributes-reference-viewport { box-shadow: 0 14px 28px hsl(28 18% 32% / 0.12); }
html.light :where(.aw-attribute-card, .aw-attribute-skeleton) { border-color: hsl(var(--border) / 0.72); background: hsl(var(--card) / 0.78); }
html.light .aw-attribute-card.is-coming { background: hsl(var(--card) / 0.54); }
html.light .aw-attribute-card__stars { color: hsl(38 72% 29%); text-shadow: none; }
html.light .aw-attribute-card__status { color: hsl(34 58% 31%); }
html.light .aw-attribute-card__weapon-icon[data-weapon="sword"] { background-image: url("/images/characters-index/icons/48px/sword-icon-dark.webp?v=20260710-suisui-xuanling-roster1"); }
html.light .aw-attribute-card__weapon-icon[data-weapon="broadblade"] { background-image: url("/images/characters-index/icons/48px/broadblade-icon-dark.webp?v=20260710-suisui-xuanling-roster1"); }
html.light .aw-attribute-card__weapon-icon[data-weapon="pistols"] { background-image: url("/images/characters-index/icons/48px/pistols-icon-dark.webp?v=20260710-suisui-xuanling-roster1"); }
html.light .aw-attribute-card__weapon-icon[data-weapon="gauntlets"] { background-image: url("/images/characters-index/icons/48px/gauntlets-icon-dark.webp?v=20260710-suisui-xuanling-roster1"); }
html.light .aw-attribute-card__weapon-icon[data-weapon="rectifier"] { background-image: url("/images/characters-index/icons/48px/rectifier-icon-dark.webp?v=20260710-suisui-xuanling-roster1"); }

@container attributes-guide (max-width: 62rem) {
  .aw-attributes-jump-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .aw-attributes-main { --aw-guide-gutter: 0.75rem; padding-block-start: 0.7rem; }
  .aw-guide-breadcrumb { margin-block-end: 0.2rem; }
  .aw-guide-hero { grid-template-columns: minmax(0, 1fr); min-block-size: 0; padding: 1rem; }
  #aw-attributes-title { font-size: clamp(1.72rem, 8.4vw, 2.35rem); }
  .aw-guide-intro { font-size: 0.84rem; }
  .aw-attributes-hero-icons { grid-template-columns: repeat(6, minmax(0, 2.8rem)); justify-content: start; inline-size: fit-content; }
  .aw-attributes-reference-viewport { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: hsl(var(--primary) / 0.58) hsl(var(--muted) / 0.45); scrollbar-width: thin; }
  .aw-attributes-reference picture { inline-size: 52rem; }
  .aw-guide-toc { align-items: start; flex-direction: column; }
  .aw-attributes-data-note { grid-template-columns: minmax(0, 1fr); }
  .aw-attributes-faq-list { grid-template-columns: minmax(0, 1fr); }
  body[data-aw-attributes-language] :where(.aw-menu-btn, .aw-social-menu-toggle, .aw-theme-toggle, .aw-lang-btn, .aw-header-donate, .aw-auth-shell-button) { min-inline-size: 44px; min-block-size: 44px; }
}

@media (max-width: 520px) {
  .aw-attributes-jump-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-attributes-hero-icons { grid-template-columns: repeat(3, minmax(0, 2.8rem)); }
  .aw-attribute-character-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  .aw-guide-byline { flex-direction: column; gap: 0.25rem; }
  .aw-attribute-group-head { grid-template-columns: 2.65rem minmax(0, 1fr); }
  .aw-attribute-group-head > img { inline-size: 2.65rem; block-size: 2.65rem; }
  .aw-attribute-count { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 360px) {
  body[data-aw-attributes-language] .aw-header { gap: 6px; padding-inline: 8px; }
  body[data-aw-attributes-language] :where(.aw-header-title, .aw-alerts-menu) { display: none; }
  body[data-aw-attributes-language] :where(.aw-menu-btn, .aw-social-menu-toggle, .aw-theme-toggle, .aw-lang-btn, .aw-header-donate) { min-inline-size: 44px; min-block-size: 44px; block-size: 44px; }
  body[data-aw-attributes-language] .aw-lang-btn { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .aw-attributes-main * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .aw-attributes-main :where(a, button):focus-visible { outline: 2px solid Highlight; }
  .aw-attributes-jump-grid a,
  .aw-attribute-card,
  .aw-attributes-retry,
  .aw-attributes-primary-link { border-color: CanvasText; }
}