@import url("./home.css");

:root {
  --surface-card: var(--paper-card); --border: var(--rule);
  --border-subtle: rgba(104, 76, 46, 0.2); --text-secondary: var(--ink-soft);
  --element-physical: #d4910a; --element-fire: #c0392b; --element-ice: #2980b9;
  --element-electric: #7c3aed; --element-ether: #0d9488; --element-anomaly: #b91c1c;
}

/* The homepage is the family foundation. This file only defines the brief. */
.hero--brief { min-height: 500px; }
.hero--brief .hero__copy { max-width: 38rem; }
.hero--brief h1 { max-width: 10ch; }
.brief-jump { display: flex; flex-wrap: wrap; gap: .65rem; max-width: 31rem; }
.brief-jump a { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-width: 14rem; padding: .75rem .9rem; border: 1px solid rgba(40,32,29,.55); background: rgba(255,250,240,.88); font-size: .75rem; font-weight: 850; text-decoration: none; }
.brief-jump a:hover { background: var(--ink); color: var(--white); }

.mode-section { padding: 72px 0 76px; }
.mode-section--sd { border-top: 1px solid var(--rule); background: var(--paper-deep); }
.mode-heading { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(15rem,.5fr); align-items: end; gap: 2rem; margin-bottom: 1.5rem; }
.mode-entry { position: relative; min-height: 244px; overflow: hidden; padding: 1.25rem 1.35rem 1.35rem; border: 1px solid rgba(49,31,20,.45); box-shadow: var(--shadow); color: #fff8e9; }
.mode-entry--da { background: linear-gradient(140deg,#c94e39,#a33b31); }
.mode-entry--sd { background: linear-gradient(140deg,#1a6d65,#11524c); }
.mode-entry__topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mode-stamp { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(255,250,235,.7); border-radius: 50%; font-size: .62rem; font-weight: 900; letter-spacing: .06em; }
.mode-entry__kind { font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.mode-entry__ghost { position: absolute; right: -1.2rem; bottom: -3.2rem; z-index: 0; color: rgba(255,250,235,.16); font-family: var(--font-display); font-size: 12rem; font-weight: 700; letter-spacing: -.16em; line-height: 1; }
.mode-entry h2 { position: relative; z-index: 1; margin: 2.5rem 0 .5rem; color: inherit; font-size: clamp(2rem,3.4vw,3.2rem); letter-spacing: -.045em; line-height: .92; }
.mode-entry .section-intro { position: relative; z-index: 1; max-width: 390px; margin: 0; font-size: .86rem; font-weight: 590; line-height: 1.5; }
.mode-heading__note { margin: 0 0 .2rem; color: var(--ink-soft); font-size: .83rem; font-weight: 650; text-align: right; }

.section-body { display: flex; flex-direction: column; gap: 1rem; }
.window-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; min-height: 46px; padding: .75rem 1rem; background: var(--ink); color: var(--paper); font-family: var(--font-meta); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.version-badge { color: var(--mustard); }
.freshness { margin-left: auto; }
.da-modes,.element-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.mode-chip,.specialty-badge,.challenge-badge { display: inline-flex; padding: .25rem .55rem; border: 1px solid var(--rule); background: var(--paper-card); color: var(--teal-deep); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.data-status,.awaiting-refresh,.quick-read,.buffs-block,.stage-card,.adversity-block { border: 1px solid var(--rule); background: var(--paper-card); }
.data-status,.awaiting-refresh { padding: 1.1rem; border-left: 5px solid var(--mustard); background: #f7dda0; }
.awaiting-refresh .status-label,.kicker,.buffs-block h3,.side-label,.wave-label { color: var(--coral-dark); font-family: var(--font-meta); font-size: .66rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.awaiting-refresh .status-note { margin: .35rem 0 .8rem; color: var(--ink-soft); font-size: .85rem; }
.quick-read,.adversity-block { overflow: hidden; }
.quick-read-heading,.detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.35rem; }
.quick-read-heading { border-bottom: 1px solid var(--rule); background: #c9e4de; }
.adversity-block .quick-read-heading { background: #f5cec3; }
.quick-read-heading h3,.detail-heading h3 { margin: .3rem 0 0; font-size: clamp(1.35rem,2.4vw,1.8rem); letter-spacing: -.04em; line-height: 1; }
.quick-read-note,.detail-heading span { color: var(--ink-soft); font-family: var(--font-meta); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-align: right; text-transform: uppercase; }

.encounter-grid,.decision-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.encounter-card,.decision-side { min-width: 0; padding: 1.15rem 1.35rem; }
.encounter-card + .encounter-card,.decision-side + .decision-side { border-left: 1px solid var(--border-subtle); }
.decision-row + .decision-row { border-top: 1px solid var(--border-subtle); }
.encounter-heading { display: flex; flex-direction: column; align-items: start; gap: .5rem; margin-bottom: .75rem; }
.encounter-heading h4 { margin: 0; font-family: var(--font-display); font-size: 1.18rem; }
.matchup-line,.decision-side { display: grid; gap: .15rem; }
.matchup-line { margin-bottom: .7rem; font-size: .75rem; }
.encounter-card p,.matchup-line span,.decision-side > span:last-child,.buff-desc,.wave-item,.hp-mult { color: var(--ink-soft); font-size: .78rem; }
.decision-side-label { color: var(--teal-deep); font-family: var(--font-meta); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.decision-side strong { font-size: .82rem; }

.buffs-block { padding: 1.2rem 1.35rem; background: #f7dda0; }
.buffs-block h3 { margin: 0 0 .55rem; }
.buff-item { padding: .45rem 0; }
.buff-item + .buff-item { border-top: 1px solid rgba(104,76,46,.22); }
.buff-name { font-size: .82rem; font-weight: 800; }
.detail-heading { padding: 1.5rem 0 .45rem; }
.stage-card { overflow: hidden; }
.stage-header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--rule); background: var(--ink); color: var(--paper); font-family: var(--font-meta); font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.challenge-badge { border-color: rgba(255,250,240,.6); background: transparent; color: var(--mustard); }
.stage-sides { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.stage-sides.three-sides { grid-template-columns: repeat(3,minmax(0,1fr)); }
.side-panel { min-width: 0; padding: 1rem; }
.side-panel + .side-panel { border-left: 1px solid var(--border-subtle); }
.element-badges { gap: .3rem; margin: .45rem 0 .6rem; }
.element-badge,.enemy-type-badge { display: inline-flex; padding: .12rem .4rem; font-size: .66rem; font-weight: 750; }
.element-badge.weakness { background: var(--el-color); color: #fff; }
.element-badge.resistance { background: rgba(40,32,29,.08); color: var(--ink-soft); text-decoration: line-through; }
.element-badge[data-element="Physical"] { --el-color: var(--element-physical); }
.element-badge[data-element="Fire"] { --el-color: var(--element-fire); }
.element-badge[data-element="Ice"] { --el-color: var(--element-ice); }
.element-badge[data-element="Electric"] { --el-color: var(--element-electric); }
.element-badge[data-element="Ether"] { --el-color: var(--element-ether); }
.element-badge[data-element="Anomaly"] { --el-color: var(--element-anomaly); }
.waves-list { margin: 0; padding: 0; list-style: none; }
.wave-item { padding: .28rem 0; }
.wave-item + .wave-item { border-top: 1px solid var(--border-subtle); }
.wave-label { margin-right: .25rem; }
.enemy-name { color: var(--ink); }
.enemy-name.boss { font-weight: 800; }
.enemy-count { color: var(--ink-soft); font-size: .72rem; }
.enemy-type-badge { background: rgba(201,78,57,.14); color: var(--coral-dark); text-transform: uppercase; }
.hp-mult { margin-top: .5rem; font-variant-numeric: tabular-nums; }

.footer__details { max-width: 35rem; color: rgba(250,234,198,.66); font-size: .62rem; line-height: 1.55; text-align: right; }
.footer__details a { color: var(--mustard); }
.disclaimer { margin: .65rem 0 0; }

/* All-boss observed trends: homepage family primitives, compact by default. */
.da-trends { margin-top: 1.35rem; }
.da-trends__heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(15rem,.75fr); align-items: end; gap: 1.5rem; margin-bottom: .8rem; }
.da-trends__heading h3 { margin: .3rem 0 0; font-size: clamp(1.35rem,2.4vw,1.8rem); letter-spacing: -.04em; line-height: 1; }
.da-trends__boundary { max-width: 28rem; margin: 0 0 .1rem; color: var(--ink-soft); font-size: .78rem; text-align: right; }
.da-trends__content { display: flex; flex-direction: column; gap: .65rem; }
.da-trends__loading { border-left-color: var(--teal); background: #c9e4de; }
.da-trends__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem .9rem; color: var(--ink-soft); font-family: var(--font-meta); font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.trend-shelf { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.trend-card { min-width: 0; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-card); box-shadow: 0 8px 18px rgba(62,39,24,.08); }
.trend-card__topline { display: flex; align-items: start; justify-content: space-between; gap: .75rem; padding: .95rem 1rem .8rem; border-bottom: 1px solid var(--rule); background: #c9e4de; }
.trend-card__index { display: block; color: var(--coral-dark); font-family: var(--font-meta); font-size: .65rem; font-weight: 900; letter-spacing: .1em; }
.trend-card h4 { margin: .25rem 0 .12rem; font-family: var(--font-display); font-size: clamp(1.15rem,2vw,1.45rem); letter-spacing: -.035em; line-height: 1.05; overflow-wrap: anywhere; }
.trend-card__source-name { margin: 0; color: var(--ink-soft); font-size: .75rem; overflow-wrap: anywhere; }
.trend-card__status { flex: 0 0 auto; padding: .24rem .4rem; border: 1px solid var(--teal); color: var(--teal-deep); font-family: var(--font-meta); font-size: .63rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.trend-card__status--suppressed { border-color: var(--coral-dark); color: var(--coral-dark); }
.trend-card__summary { display: grid; grid-template-columns: minmax(8rem,.75fr) minmax(0,1.25fr); gap: .8rem; padding: .85rem 1rem; }
.trend-stat { min-width: 0; }
.trend-stat > span { display: block; margin-bottom: .25rem; color: var(--ink-soft); font-family: var(--font-meta); font-size: .63rem; font-weight: 850; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; }
.trend-stat strong { display: block; font-size: .92rem; overflow-wrap: anywhere; }
.trend-stat small { display: block; margin-top: .2rem; color: var(--ink-soft); font-size: .75rem; line-height: 1.35; }
.trend-stat--highest strong { color: var(--teal-deep); }
.trend-card__details { border-top: 1px solid var(--border-subtle); }
.trend-card__details > summary,.trend-method > summary,.trend-remaining > summary,.trend-source > summary { min-height: 44px; padding: .7rem 1rem; color: var(--teal-deep); font-size: .75rem; font-weight: 800; cursor: pointer; list-style-position: inside; }
.trend-card__details > summary:hover,.trend-method > summary:hover,.trend-remaining > summary:hover,.trend-source > summary:hover { background: rgba(201,228,222,.45); }
.trend-card__details-body { display: flex; flex-direction: column; gap: .8rem; padding: 0 1rem 1rem; }
.trend-samples { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.trend-sample { min-width: 0; padding: .55rem .65rem; border: 1px solid var(--border-subtle); background: rgba(255,250,240,.6); }
.trend-sample span { display: block; color: var(--ink-soft); font-family: var(--font-meta); font-size: .63rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.trend-sample strong { display: block; margin-top: .15rem; font-size: .82rem; }
.trend-sample small { display: block; color: var(--ink-soft); font-size: .72rem; overflow-wrap: anywhere; }
.trend-rows h5 { margin: 0 0 .35rem; color: var(--coral-dark); font-family: var(--font-meta); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.trend-rows ol,.trend-remaining ol { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.trend-row { display: grid; grid-template-columns: 1.3rem minmax(0,1fr) auto auto auto; align-items: baseline; gap: .35rem; min-width: 0; padding: .35rem 0; border-top: 1px solid var(--border-subtle); font-size: .75rem; font-variant-numeric: tabular-nums; }
.trend-row__rank { color: var(--ink-soft); font-family: var(--font-meta); font-size: .65rem; }
.trend-row__name { min-width: 0; font-weight: 750; overflow-wrap: anywhere; }
.trend-row__count { color: var(--ink-soft); font-size: .7rem; }
.trend-row__rate { color: var(--teal-deep); font-weight: 800; }
.trend-row__delta { font-weight: 800; white-space: nowrap; }
.trend-row__delta--up { color: var(--teal-deep); }
.trend-row__delta--down { color: var(--coral-dark); }
.trend-row__delta--flat,.trend-row__delta--na { color: var(--ink-soft); }
.trend-remaining { border-top: 1px solid var(--border-subtle); }
.trend-remaining > summary { padding-right: 0; padding-left: 0; }
.trend-remaining ol { padding-bottom: .35rem; }
.trend-empty { margin: 0; color: var(--ink-soft); font-size: .78rem; }
.trend-source { border-top: 1px solid var(--border-subtle); }
.trend-source > summary { padding-right: 0; padding-left: 0; }
.trend-source__body,.trend-method__body { display: flex; flex-direction: column; gap: .35rem; padding: 0 0 .25rem; color: var(--ink-soft); font-size: .72rem; line-height: 1.4; }
.trend-source__body p,.trend-method__body p { margin: 0; overflow-wrap: anywhere; }
.trend-method { border: 1px solid var(--rule); background: #f7dda0; }
.trend-method__body { padding: 0 1rem .8rem; color: var(--ink); }

@media (forced-colors: active) {
  .trend-card,.trend-method,.trend-sample { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .trend-card__topline,.trend-card__details > summary:hover,.trend-method > summary:hover { background: Canvas; }
  .trend-card__status,.trend-card__status--suppressed { border-color: CanvasText; color: CanvasText; }
  .trend-stat--highest strong,.trend-row__rate,.trend-row__delta--up,.trend-row__delta--down { color: CanvasText; }
}

@media (max-width: 760px) {
  .ticker__inner { display: grid; grid-template-columns: 1fr; gap: .25rem; padding: .55rem 0; }
  .ticker__item { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: .45rem; }
  .ticker__divider { display: none; }
  .ticker__remaining { display: block; margin-top: .08rem; }
  .ticker__sep { display: none; }
  .hero--brief { min-height: 0; }
  .brief-jump { display: grid; }
  .brief-jump a { min-width: 0; }
  .mode-heading { grid-template-columns: 1fr; gap: 1rem; }
  .mode-heading__note { max-width: 30rem; text-align: left; }
  .encounter-grid,.decision-row,.stage-sides,.stage-sides.three-sides { grid-template-columns: 1fr; }
  .encounter-card + .encounter-card,.decision-side + .decision-side,.side-panel + .side-panel { border-top: 1px solid var(--border-subtle); border-left: 0; }
  .quick-read-heading,.detail-heading { align-items: start; flex-direction: column; }
  .quick-read-note,.detail-heading span { text-align: left; }
  .freshness { width: 100%; margin-left: 0; }
  .footer__details { text-align: left; }
  .da-trends__heading { grid-template-columns: 1fr; gap: .6rem; }
  .da-trends__boundary { max-width: 30rem; text-align: left; }
  .trend-shelf { grid-template-columns: 1fr; }
  .trend-card__summary { grid-template-columns: 1fr; gap: .65rem; }
  .trend-row { grid-template-columns: 1.3rem minmax(0,1fr) auto; row-gap: .12rem; }
  .trend-row__rank { grid-row: 1 / span 2; }
  .trend-row__name { grid-column: 2; grid-row: 1; }
  .trend-row__count { grid-column: 2; grid-row: 2; }
  .trend-row__rate { grid-column: 3; grid-row: 1; }
  .trend-row__delta { grid-column: 3; grid-row: 2; }
}