/* The Storm chronicle: layered on top of /hammertown/styles.css (fonts,
   colour tokens, story sections, modal, participant table). This file adds
   the recap-board look: framed panels, the VS scoreboard, side-coloured
   cards and the honor tiers. Hero / story / aftermath art comes from inline
   styles (the quest's own images). */

:root {
  --raid: #a3122a;
  --raid-deep: #3a0a12;
  --raid-ink: #ff8a9a;
  --law: #1f5fa8;
  --law-deep: #0b1f3d;
  --law-ink: #8cc0ff;
  --field: #5b3b86;
  --field-deep: #1e1330;
  --paper-bg: #e7d6b1;
  --paper-ink: #2a1b0e;
  --panel-border: rgba(212, 162, 75, .45);
}

.storm .hero__art,
.storm .white-flag__scene,
.storm .aftermath { background-position: center; background-size: cover; background-repeat: no-repeat; }

/* ── hero ──────────────────────────────────────────────────────────── */
.storm-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: end; min-height: 640px; }
.storm-hero .hero__copy { padding-bottom: 60px; }
.storm-hero h1 { margin: 14px 0 4px; font-size: clamp(56px, 9vw, 118px); }
.storm-pill { display: inline-block; margin: 0; padding: 5px 14px; border: 1px solid #c99a4e; border-radius: 999px; color: #f0d795; font: 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; background: #0c0907aa; }
.storm-hero__sub { margin: 0 0 18px; color: #e8c779; font: clamp(16px, 2vw, 22px) var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.storm-hero__date { margin: 18px 0 0; color: #bfae8d; font: 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.storm-vs { padding: 0 clamp(20px, 4vw, 60px) 60px; text-align: center; }
.storm-vs__victory { display: inline-block; margin: 0 0 -1px; padding: 8px 26px; border: 2px solid #8cc0ff; border-bottom: 0; background: linear-gradient(#17498a, #0b1f3d); color: #f3e6c4; font: 22px var(--display); text-transform: uppercase; box-shadow: 0 -6px 20px #0008; }
.storm-vs__board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.storm-vs__board > i { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid #c99a4e; border-radius: 50%; background: #120d09; color: #f0d795; font: 16px var(--display); font-style: normal; transform: translate(-50%, -50%); }
.storm-vs__side { padding: 20px 16px; border: 2px solid; }
.storm-vs__side--rebels { border-color: #c0182f; background: linear-gradient(160deg, #7a0f22, #22060b); }
.storm-vs__side--sheriff { border-color: #3b7fd1; background: linear-gradient(200deg, #17498a, #081a33); }
.storm-vs__side.is-winner { box-shadow: 0 0 0 2px #e8c779 inset, 0 0 30px #8cc0ff55; }
.storm-vs__side span { display: block; color: #f0d795; font: 20px var(--display); text-transform: uppercase; }
.storm-vs__side b { display: block; margin: 4px 0; color: #fff3d6; font: clamp(28px, 3.4vw, 40px) var(--display); }
.storm-vs__side small { color: #d9c7a3; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.storm-vs__margin { display: inline-block; margin: -1px 0 0; padding: 7px 22px; border: 2px solid #c99a4e; border-top: 0; background: #120d09; color: #bfae8d; font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.storm-vs__margin b { margin-left: 6px; color: #f0d795; font: 20px var(--display); letter-spacing: 0; }

/* ── board + panels ────────────────────────────────────────────────── */
.storm-board { max-width: 1280px; margin: 0 auto; padding: 34px 20px 60px; display: grid; gap: 18px; }
.storm-row { display: grid; gap: 18px; }
.storm-row--overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.storm-row--trio { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .9fr); }
.storm-row--mounts { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); }
.storm-row--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.storm-panel { position: relative; min-width: 0; padding: 20px 22px 22px; border: 1px solid var(--panel-border); background: linear-gradient(180deg, #1a130d, #110c08); box-shadow: 0 14px 34px #0009, inset 0 0 0 1px #00000060; }
.storm-panel:before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("https://imagedelivery.net/X88xqy8rYOBclOQo6xifRA/75c0f1b3-25f6-4fc0-4c77-0799c1e68c00/public"), url("https://imagedelivery.net/X88xqy8rYOBclOQo6xifRA/a82020ac-0b6d-4171-51a0-ccba05999900/public"), url("https://imagedelivery.net/X88xqy8rYOBclOQo6xifRA/3cbb6ffb-5669-4fbd-1119-3244ac587200/public"), url("https://imagedelivery.net/X88xqy8rYOBclOQo6xifRA/1cbb6f57-861a-48aa-bf62-b56dc68c0c00/public"); background-repeat: no-repeat; background-position: top left, top right, bottom left, bottom right; background-size: 24px 24px; }
.storm-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #5a4329; }
.storm-panel__head h2 { margin: 0; color: #f0d795; font: clamp(20px, 2.2vw, 28px) var(--display); letter-spacing: .03em; text-transform: uppercase; text-shadow: 2px 3px #000; }
.storm-panel__sub { color: #c59442; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.storm-panel--paper { background: linear-gradient(180deg, #2a1e12, #1a120b); }
.storm-link { border: 1px solid #806a42; border-radius: 999px; background: #0e0a07; color: #e4c27a; padding: 5px 12px; font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.storm-link:hover { border-color: #e4c27a; }
.storm-panel > .storm-link { display: block; margin: 16px auto 0; }
.storm-prose { margin: 14px 0 0; color: #c9b898; font-size: 14px; line-height: 1.55; }

.storm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.storm-tile { padding: 8px 6px; text-align: center; border-right: 1px solid #3f2f1d; }
.storm-tile:last-child { border-right: 0; }
.storm-tile b { display: block; color: #f6dfab; font: clamp(26px, 3vw, 38px) var(--display); }
.storm-tile span { color: #bfae8d; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.storm-depths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.storm-depth { padding: 12px 14px; border-left: 4px solid var(--raid); background: var(--raid-deep); }
.storm-depth--sheriff { border-left-color: var(--law); background: var(--law-deep); }
.storm-depth h3 { margin: 0 0 4px; color: #f0d795; font: 16px var(--display); text-transform: uppercase; }
.storm-depth p { margin: 0; color: #d6c4a2; font-size: 13px; }
.storm-depth b { color: #f3c95b; }

/* Final push: three parchment cards. */
.storm-push { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 6px; }
.storm-push__arrow { align-self: center; color: #c99a4e; font: 28px var(--display); }
.storm-push__card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #a88652; background: var(--paper-bg); color: var(--paper-ink); text-align: center; box-shadow: inset 0 0 18px #8a6a3a55; }
.storm-push__card > p { margin: 0 0 4px; padding-bottom: 5px; border-bottom: 1px solid #b8986040; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.storm-push__row b { display: block; font: clamp(17px, 1.8vw, 22px) var(--display); }
.storm-push__row span { font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.storm-push__row--rebels b, .storm-push__row--rebels span { color: #a3122a; }
.storm-push__row--sheriff b, .storm-push__row--sheriff span { color: #17498a; }
.storm-push__card em { margin-top: auto; padding: 5px 4px; color: #7a0f22; font: bold 9px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.storm-push__card--final em { background: #1f5a3a; color: #eaf6e6; }

/* ── contributors ──────────────────────────────────────────────────── */
.storm-contributors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.storm-contributor { display: flex; flex-direction: column; overflow: hidden; border: 2px solid #c0182f; background: linear-gradient(180deg, #520c1a, #16050a); }
.storm-contributor--sheriff { border-color: #3b7fd1; background: linear-gradient(180deg, #123a6e, #07152a); }
.storm-contributor__art { position: relative; aspect-ratio: 1; background: #120d09; }
.storm-contributor__art .portrait { width: 100%; height: 100%; object-fit: cover; }
.storm-rank { position: absolute; top: 8px; left: 8px; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid #e8c779; border-radius: 50%; background: #120d09e6; color: #f0d795; font: 14px var(--display); }
.storm-contributor__body { padding: 10px 12px 4px; }
.storm-contributor h3 { margin: 0; overflow: hidden; color: #fff0cf; font: 16px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.storm-contributor__side { margin: 2px 0 6px; color: var(--raid-ink); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.storm-contributor--sheriff .storm-contributor__side { color: var(--law-ink); }
.storm dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 8px 0; }
.storm dd, .storm dt { margin: 0; }
.storm dd { color: #f3c95b; font: bold 14px var(--body); }
.storm dt { color: #a99b84; font: 8px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.storm-plaque-note { margin: auto 10px 10px; padding: 8px 10px; border: 1px solid #a88652; background: var(--paper-bg); color: var(--paper-ink); text-align: center; }
.storm-plaque-note strong { display: block; color: #7a0f22; font: 14px var(--display); text-transform: uppercase; }
.storm-plaque-note span { display: block; font-size: 12px; line-height: 1.35; }

/* ── top ryders list · biggest hit · luckiest ──────────────────────── */
.storm-list { margin: 0; padding: 0; list-style: none; }
.storm-list__row { display: grid; grid-template-columns: 34px 44px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #3f2f1d; }
.storm-list__row:last-child { border-bottom: 0; }
.storm-list__rank { color: #f0d795; font: 16px var(--display); }
.storm-list .portrait--tiny { width: 44px; height: 44px; object-fit: cover; border: 1px solid #82633b; }
.storm-list__row strong { display: block; overflow: hidden; color: #f3e1b6; font: 15px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.storm-list__side { color: var(--raid-ink); font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.storm-list__side--sheriff { color: var(--law-ink); }
.storm-list__row em { color: #f3c95b; font: bold 15px var(--body); font-style: normal; text-align: right; }
.storm-list__row em small { display: block; color: #a99b84; font: 8px var(--mono); text-transform: uppercase; }
.storm-chip { padding: 3px 8px; border: 1px solid #a88652; background: var(--paper-bg); color: var(--paper-ink); font: bold 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.storm-chip--gold { display: inline-block; margin-top: 8px; border-color: #e3b454; background: #e3b454; }

.storm-panel--feature { display: flex; flex-direction: column; text-align: center; }
.storm-panel--feature h3 { margin: 8px 0 2px; color: #f0d795; font: 22px var(--display); text-transform: uppercase; }
.storm-panel--feature > p { margin: 4px 0 0; color: #c9b898; font-size: 13px; }
.storm-feature__who { color: var(--raid-ink) !important; font: 11px var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; }
.storm-feature__list { color: #e3d0ac !important; }
.storm-hit { background: linear-gradient(180deg, #3a0a12, #14050a); }
.storm-hit__posse { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.storm-hit__posse .portrait { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border: 1px solid #82633b; }
.storm-big { margin: 12px 0 0 !important; }
.storm-big b { display: block; color: #f3c95b; font: 56px/1 var(--display); text-shadow: 3px 4px #000; }
.storm-big span { color: #e8c779; font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.storm-lucky { background: linear-gradient(180deg, #0f2544, #071427); }
.storm-lucky .storm-feature__who { color: var(--law-ink) !important; }
.storm-lucky__art { position: relative; }
.storm-lucky__art .portrait { width: 100%; aspect-ratio: 16 / 11; height: auto; object-fit: cover; object-position: center 20%; border: 1px solid #3b7fd1; }
.storm-lucky__art .storm-big { position: absolute; right: 10px; bottom: 8px; text-align: right; }
.storm-lucky .storm-plaque-note { margin: 12px 0 0; }

/* ── mounts · horses · duo ─────────────────────────────────────────── */
.storm-mounts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.storm-mount { overflow: hidden; border: 2px solid #c0182f; background: linear-gradient(180deg, #520c1a, #16050a); }
.storm-mount--sheriff { border-color: #3b7fd1; background: linear-gradient(180deg, #123a6e, #07152a); }
.storm-mount__label { margin: 0; padding: 6px; background: #c0182f; color: #fff0cf; font: 13px var(--display); text-align: center; text-transform: uppercase; }
.storm-mount--sheriff .storm-mount__label { background: #2d5d86; }
.storm-mount__body { padding: 10px; }
.storm-mount__body .portrait { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.storm-mount h3 { margin: 8px 0 0; color: #fff0cf; font: 17px var(--display); }
.storm-mount p { margin: 0; color: var(--raid-ink); font: 10px var(--mono); text-transform: uppercase; }
.storm-mount--sheriff p { color: var(--law-ink); }
.storm-mount b { display: block; margin-top: 8px; color: #f3c95b; font: 22px var(--display); }
.storm-mount small { color: #a99b84; font: 9px var(--mono); text-transform: uppercase; }
.storm-horses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.storm-horse { min-width: 0; }
.storm-horse .portrait { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border: 1px solid #82633b; }
.storm-horse h3 { margin: 8px 0 0; color: #f3e1b6; font: 15px var(--display); }
.storm-horse p { margin: 0; color: #bfae8d; font-size: 12px; }
.storm-horse small { display: block; margin-top: 4px; color: #d9c7a3; font-size: 11px; line-height: 1.4; }
.storm-duo { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #3f2f1d; }
.storm-duo__art { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.storm-duo__art .portrait { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.storm-duo h3 { margin: 4px 0; color: #f0d795; font: 20px var(--display); }
.storm-duo p { margin: 0; color: #c9b898; font-size: 13px; }
.storm-duo b { color: #f3c95b; }

/* ── honors ────────────────────────────────────────────────────────── */
.storm-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.storm-tier { padding: 12px 14px; border: 2px solid #c0182f; background: linear-gradient(180deg, #3a0a12, #14050a); }
.storm-tier--sheriff { border-color: #3b7fd1; background: linear-gradient(180deg, #0f2c55, #07142a); }
.storm-tier--field { border-color: #8a63c0; background: linear-gradient(180deg, #2a1a42, #120b1c); }
.storm-tier h3 { margin: 0 0 10px; color: #f0d795; font: 16px var(--display); text-transform: uppercase; }
.storm-tier h3 span { margin-left: 8px; color: #e3b454; font: 10px var(--mono); letter-spacing: .08em; }
.storm-tier ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.storm-tier--rebels ul { grid-template-columns: 1fr; }
.storm-tier li strong { display: block; overflow: hidden; color: #fff0cf; font: 14px var(--display); text-overflow: ellipsis; white-space: nowrap; }
.storm-tier li span { display: block; color: #e3b454; font: 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.storm-tier li small { display: block; color: #a99b84; font-size: 11px; line-height: 1.3; }

/* ── tactics · historical ──────────────────────────────────────────── */
.storm-tactics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.storm-tactics ul, .storm-historical { margin: 8px 0 0; padding: 0; list-style: none; }
.storm-tactics li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 6px 0; border-bottom: 1px solid #3f2f1d; }
.storm-tactics li b { color: #f3e1b6; font: 13px var(--body); font-weight: 700; }
.storm-tactics li span { color: #a99b84; font: 11px var(--mono); }
.storm-tactics li em { grid-column: 1 / -1; font: 10px var(--mono); font-style: normal; text-transform: uppercase; }
.storm-tactics .is-up { color: #8fd49a; }
.storm-tactics .is-down { color: #f08a6f; }
.storm-historical { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.storm-historical button { width: 100%; height: 100%; padding: 10px; border: 1px solid #806a42; background: #20170f; text-align: left; cursor: pointer; }
.storm-historical button:hover { border-color: #e3b454; }
.storm-historical strong { display: block; color: #f0d795; font: 14px var(--display); }
.storm-historical span { display: block; margin-top: 3px; color: #c9b898; font-size: 12px; }

/* ── rewards · event badges ────────────────────────────────────────── */
.storm-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.storm-reward { padding: 12px; border: 1px solid #5a4329; background: #1d150e; }
.storm-reward b { color: #f3c95b; font: 22px var(--display); }
.storm-reward h3 { margin: 2px 0; color: #f3e1b6; font: 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.storm-reward p { margin: 0; color: #a99b84; font-size: 12px; line-height: 1.4; }
.storm-event-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.storm-event-badge { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 2px solid #c0182f; background: linear-gradient(160deg, #7a0f22, #22060b); color: #fff0cf; text-align: left; cursor: pointer; }
.storm-event-badge--sheriff { border-color: #3b7fd1; background: linear-gradient(200deg, #17498a, #081a33); }
.storm-event-badge.is-victor { box-shadow: 0 0 0 2px #e8c779 inset, 0 0 24px #e8c77944; }
.storm-event-badge span { color: #e8c779; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.storm-event-badge strong { font: 18px var(--display); text-transform: uppercase; }
.storm-event-badge small { color: #d9c7a3; font-size: 12px; line-height: 1.4; }
.storm-event-badge em { margin-top: 6px; color: #f3c95b; font: 11px var(--mono); font-style: normal; text-transform: uppercase; }

/* ── story sections ────────────────────────────────────────────────── */
.storm .two-sides__panel--rebels { background: linear-gradient(135deg, #5a0c1c 0%, #16050a 78%); }
.storm .two-sides__panel--sheriff { background: linear-gradient(225deg, #123a6e 0%, #07142a 78%); }
.participant-table__faction--rebels { color: var(--raid-ink); }
.participant-table__faction--sheriff { color: var(--law-ink); }
.storm .two-sides__icon { background: #1a130d; padding: 0; }
.storm-footnote { max-width: 620px; margin: 14px auto 0; color: #8f8069; font-size: 13px; text-align: center; }
.storm-record h2 em { color: #d0593c; font-style: normal; font-size: .7em; }
.storm-record__last { color: #f0d795 !important; font: 26px var(--display) !important; text-transform: uppercase; }

/* ── text badges (until badge art is uploaded) ─────────────────────── */
.badge.badge--text { min-height: 24px; padding: 4px 9px; border: 1px solid #806a42; border-radius: 999px; background: #292015; color: #d8bd7b; font: 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.badge--text.badge--legendary { border-color: #d6aa50; color: #f4cd68; background: #503414; }
.badge--text.badge--victor { border-color: #8cc0ff; color: #e6f3ff; background: #17498a; }
.storm-seal { display: grid; place-items: center; width: 190px; height: 190px; margin: 0 auto 16px; padding: 26px; border: 7px double #bb8a3f; border-radius: 50%; background: radial-gradient(circle, #2d2014, #120d09); color: #f0d795; font: 20px/1.05 var(--display); text-transform: uppercase; box-shadow: 0 10px 30px #000a; }
.storm-seal--legendary { border-color: #d6aa50; color: #f4cd68; }
.storm-seal--victor { border-color: #8cc0ff; color: #e6f3ff; background: radial-gradient(circle, #17498a, #081a33); }

/* ── modals ────────────────────────────────────────────────────────── */
.storm-reward-table > div { grid-template-columns: 46px minmax(0, 1fr) 60px 60px 60px 60px; }
.storm-reward-table b small { display: block; color: #b38c4d; font: 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.storm-reward-table strong { color: #f3c95b; }
.storm-participant-table .participant-table__head,
.storm-participant-table .participant-table__row { grid-template-columns: 70px minmax(180px, 1.3fr) minmax(120px, 1fr) 80px 90px 60px; }
.storm-participant { display: flex; align-items: center; gap: 10px; }
.storm-participant .portrait--tiny { flex: none; width: 36px; height: 36px; object-fit: cover; }
.storm-participant-table .participant-table__row > span:nth-child(3) small { display: block; color: #8f8069; font: 9px var(--mono); }

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .storm-row--trio { grid-template-columns: 1fr 1fr; }
  .storm-row--trio > :first-child { grid-column: 1 / -1; }
  .storm-row--mounts { grid-template-columns: 1fr; }
  .storm-contributors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .storm-tiers { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .storm-hero { grid-template-columns: 1fr; align-items: start; }
  .storm-hero .hero__copy { padding-bottom: 20px; }
  .storm-row--overview, .storm-row--split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .storm-board { padding: 20px 16px 40px; }
  .storm-panel { padding: 16px; }
  .storm-vs { padding: 0 16px 40px; }
  .storm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
  .storm-tile:nth-child(3) { border-right: 0; }
  .storm-depths, .storm-mounts, .storm-rewards, .storm-event-badges, .storm-tactics { grid-template-columns: 1fr; }
  .storm-push { grid-template-columns: 1fr; }
  .storm-push__arrow { transform: rotate(90deg); justify-self: center; }
  .storm-contributors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .storm-row--trio { grid-template-columns: 1fr; }
  .storm-horses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .storm-historical { grid-template-columns: 1fr 1fr; }
  .storm-tier ul { grid-template-columns: 1fr; }
  .storm-list__row { grid-template-columns: 28px 40px minmax(0, 1fr) auto; }
  .storm-list__row > span { display: none; }
  .storm-reward-table > div { grid-template-columns: 30px minmax(0, 1fr) 50px 44px; }
  .storm-reward-table > div > :nth-child(3), .storm-reward-table > div > :nth-child(4) { display: none; }
  .storm-participant-table .participant-table__head { display: none; }
  .storm-participant-table .participant-table__row { grid-template-columns: 50px 1fr auto; row-gap: 4px; }
  .storm-participant-table .participant-table__row > span:nth-child(3),
  .storm-participant-table .participant-table__faction { grid-column: 2; }
}

/* Legibility fixes from the render pass. */
.storm-vs__board { gap: 8px; }
.storm-vs__board > i { width: 40px; height: 40px; font-size: 13px; }
.storm-vs__side { padding: 20px 26px; }
.storm-vs__side b { font-size: clamp(24px, 2.8vw, 34px); }
.storm-lucky__art .storm-big { padding: 6px 10px; background: linear-gradient(90deg, transparent, #071427e6 30%); }
.storm-contributor .storm-plaque-note { min-height: 78px; display: flex; flex-direction: column; justify-content: center; }
.storm-vs__side b { font-size: clamp(22px, 2.4vw, 30px); }
.storm-contributor dl { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 620px) {
  .storm-contributors { grid-template-columns: 1fr; }
  .storm-contributor { display: grid; grid-template-columns: 120px minmax(0, 1fr); }
  .storm-contributor__art { aspect-ratio: auto; min-height: 120px; }
  .storm-contributor .storm-plaque-note { grid-column: 1 / -1; min-height: 0; margin: 0 10px 10px; }
}

/* ── lore banners (between the results panels) ─────────────────────── */
.storm-lore { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 460px; padding: 70px max(24px, calc((100vw - 1240px) / 2)); overflow: hidden; border-top: 1px solid #5a4329; border-bottom: 1px solid #5a4329; background: #120d09 var(--lore-image) var(--lore-position, center) / cover no-repeat; }
.storm-lore:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0c0907f2 0%, #0c0907d9 38%, #0c090700 72%), linear-gradient(0deg, #0c0907aa, transparent 30%); }
.storm-lore--right { justify-content: flex-end; }
.storm-lore--right:after { background: linear-gradient(270deg, #0c0907f2 0%, #0c0907d9 38%, #0c090700 72%), linear-gradient(0deg, #0c0907aa, transparent 30%); }
.storm-lore article { max-width: 540px; }
.storm-lore h2 { margin: 10px 0 16px; color: #f0d795; font: clamp(32px, 4.5vw, 54px)/.95 var(--display); text-transform: uppercase; text-shadow: 3px 4px #28170f; }
.storm-lore p:not(.kicker) { margin: 0 0 12px; color: #e3d3b4; font-size: 16px; line-height: 1.6; }
.storm-lore q { display: block; margin-top: 20px; color: #e3b454; font: 20px var(--mono); text-transform: uppercase; }
.storm .two-sides { border-bottom: 0; }
@media (max-width: 620px) {
  .storm-lore { min-height: 0; padding: 200px 16px 36px; background-position: var(--lore-position, center) top; background-size: auto 260px; }
  .storm-lore:after, .storm-lore--right:after { background: linear-gradient(0deg, #0c0907 0%, #0c0907 55%, #0c090700 80%); }
  .storm-lore--right { justify-content: flex-start; }
}

/* Mobile fit pass (audited at 320 / 360 / 390 / 414px). */
@media (max-width: 900px) {
  /* 1fr alone lets the hero's min-content (title, scoreboard) widen the
     column past the viewport; minmax(0, 1fr) lets it shrink. */
  .storm-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .storm-contributor h3 { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
  .reward-table.storm-reward-table > div > b, .storm-reward-table b small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .storm-hero h1 { font-size: 50px; }
  .storm-hero__sub { letter-spacing: .1em; font-size: 14px; }
  .storm-vs { padding: 0 12px 32px; }
  .storm-vs__board { gap: 6px; }
  .storm-vs__side { min-width: 0; padding: 14px 8px; }
  .storm-vs__side span { font-size: 15px; }
  .storm-vs__side b { font-size: 20px; }
  .storm-vs__board > i { width: 32px; height: 32px; font-size: 11px; }
  .storm-vs__victory { padding: 6px 14px; font-size: 16px; }
  .storm-board { padding-left: 12px; padding-right: 12px; }
  .storm-panel__head h2 { font-size: 19px; }
  .storm-tile b { font-size: 24px; }
}
@media (max-width: 620px) {
  .storm-duo { grid-template-columns: minmax(0, 1fr); }
  .storm-duo__art { max-width: 180px; }
  .storm-duo h3 { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .storm-list__row strong { white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
}
@media (max-width: 620px) {
  .storm-lucky__art .storm-big { position: static; padding: 10px 0 0; background: none; text-align: center; }
  .storm-tile span { display: block; line-height: 1.3; }
}
@media (max-width: 620px) {
  .storm-mount__body { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; }
  .storm-mount h3 { margin-top: 0; overflow-wrap: anywhere; }
  .storm-tier h3 span { display: block; margin: 2px 0 0; }
}

/* Badge art (fe/public/badges/the-storm). */
.storm .badge img { width: 44px; height: 44px; }
.storm-event-badge { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.storm-event-badge__art { grid-row: 1 / span 4; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 6px 10px #000a); }
.storm-event-badge > :not(img) { grid-column: 2; }
.storm-historical button { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.storm-historical img { grid-row: 1 / span 2; width: 52px; height: 52px; object-fit: contain; }
.storm-historical strong, .storm-historical span { grid-column: 2; }
.badge-modal img { width: 240px; height: 240px; }
@media (max-width: 620px) {
  .storm-event-badge { grid-template-columns: 72px minmax(0, 1fr); }
  .storm-event-badge__art { width: 72px; height: 72px; }
  .storm-historical { grid-template-columns: 1fr; }
}
.storm-historical span { overflow-wrap: anywhere; }

/* Dedicated banner art: desktop + mobile variants via CSS variables. */
.storm-record { background: #120d09 var(--record-image) center / cover no-repeat; }
/* The final shootout art is busy, so the text side gets a heavier wash. */
.storm-record:after { background: linear-gradient(90deg, #0c0907f5 0%, #0c0907e0 40%, #0c090733 75%), linear-gradient(0deg, #0c0907cc, transparent 40%) !important; }
@media (max-width: 620px) {
  /* 3:2 phone art shown full-width as a strip above the text. */
  .storm-lore { background-image: var(--lore-image-mobile, var(--lore-image)); background-size: 100% auto; background-position: center top; padding-top: calc(66.6vw - 24px); }
  .storm-record { background-image: var(--record-image-mobile, var(--record-image)); background-position: center top; }
  .storm-record:after { background: linear-gradient(0deg, #0c0907f7 0%, #0c0907e6 50%, #0c090766 85%) !important; }
}

/* Banner 1 (hero): desktop / phone art via CSS variables. */
.storm-hero .hero__art { background-image: var(--hero-image); background-position: center; background-size: cover; }
@media (max-width: 620px) {
  .storm-hero .hero__art { background-image: var(--hero-image-mobile, var(--hero-image)); background-position: center top; }
}

/* Phone hero = one screen: title at the top, VS scoreboard at the bottom.
   Overrides Hammertown's mobile .hero / .hero__copy min-height: 570px.
   min-height (not height) so a very short phone grows instead of clipping. */
@media (max-width: 620px) {
  .storm-hero { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100svh - 57px); }
  .storm-hero .hero__copy { min-height: 0; padding: 28px 16px 12px; }
  .storm-hero h1 { margin-top: 12px; }
  .storm-hero .lead { font-size: 17px; }
  .storm-vs { padding: 0 16px 20px; }
}
@media (max-width: 420px) {
  .storm-vs__board { gap: 26px; }
  .storm-vs__side { padding: 12px 6px; }
  .storm-vs__side b { font-size: 19px; }
}
@media (max-width: 900px) {
  /* The VS block shrank to its content inside the flex hero, so it sat left
     of centre; make it span the hero and centre its contents. */
  .storm-vs { align-self: stretch; width: 100%; max-width: none; box-sizing: border-box; margin: 0 auto; }
}

.easter-egg { display: flex; justify-content: center; padding: 40px 20px; text-align: center; }
.easter-egg a { color: #8a7350; font: 11px var(--mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: color .15s ease; }
.easter-egg a:hover, .easter-egg a:focus-visible { color: #e6bd69; text-decoration: underline; text-underline-offset: 4px; }