/* Season II talent: isolated styles, reusing the original caster portraits. */
.s2-casters-page { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 50px; background: #0c0b09; }
.s2-casters-page::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .2; background: linear-gradient(#0c0b09 0%, transparent 35%, #0c0b09 100%), var(--lmp-img-52fe5e361449, url("../img/optimized/ambient-bg-battle-1280-e08c7f8a6d90.webp")) center / cover; pointer-events: none; }
.s2-casters-page::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 45%, #b4851821, transparent 68%); pointer-events: none; }
.s2-casters-heading { text-align: center; max-width: 710px; margin: 0 auto 38px; }
.s2-casters-kicker { color: #e7c56e; font: 700 11px var(--font-body); letter-spacing: 3px; }
.s2-casters-kicker span { margin-right: 8px; }
.s2-casters-heading h1 { margin: 15px 0; font-size: clamp(36px, 5vw, 64px); line-height: 1.08; color: #fff3d7; }
.s2-casters-heading h1 em { color: #edc661; font-style: normal; }
.s2-casters-heading p { color: #bcb4a3; font-size: 14px; line-height: 1.8; max-width: 570px; margin: auto; }
.s2-casters-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1180px; margin: auto; }
.s2-caster { --caster-accent: #f4ce76; position: relative; min-width: 0; display: flex; flex-direction: column; border: 1px solid #8f7139; border-radius: 14px; overflow: hidden; background: #11100e; box-shadow: 0 24px 50px #0009; transition: border-color .25s ease, box-shadow .25s ease; }
.s2-caster--kurra { --caster-accent: #f6c293; --caster-glow: 66, 221, 210; }
.s2-caster--hmomoh, .s2-caster--panzer { --caster-glow: 249, 194, 76; }
.s2-caster::before { content: ''; position: absolute; z-index: 5; inset: 7px; border: 1px solid #e8c47738; border-radius: 9px; pointer-events: none; }
.s2-caster::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #94641a, #ffe29c, #94641a); }
.s2-caster-visual { position: relative; height: 400px; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, #a7772c60, transparent 65%), repeating-linear-gradient(120deg, transparent 0 78px, #f1cc680c 79px 80px), #1c1914; }
.s2-caster--panzer .s2-caster-visual { background-color: #181414; }
.s2-caster-visual::before { content: ''; position: absolute; z-index: 1; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(var(--caster-glow), .55), rgba(var(--caster-glow), .17) 40%, transparent 72%), linear-gradient(115deg, rgba(var(--caster-glow), .28), transparent 32% 70%, rgba(var(--caster-glow), .2)); pointer-events: none; }
.s2-caster--kurra .s2-caster-visual { background-color: #092421; }
.s2-caster-visual::after { content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(0deg, #11100e, #11100eaa 12%, transparent 40%), linear-gradient(180deg, #080706b0, transparent 25%); }
.s2-caster-badge { position: absolute; top: 22px; left: 22px; z-index: 4; color: #ffe2a1; background: #11100ef0; border: 1px solid #b78f4590; border-radius: 20px; padding: 8px 10px; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.s2-caster-number { position: absolute; z-index: 4; right: 23px; top: 21px; color: #ffe5a6b0; font: 600 28px/1 var(--font-body); }
.s2-caster-logo { position: absolute; width: 82%; height: 100%; left: 9%; object-fit: contain; opacity: .13; filter: sepia(1); }
.s2-caster-logo.s2-caster-logo--kurra { width: 115%; height: 100%; max-width: none; left: -7.5%; object-fit: cover; opacity: .48; filter: saturate(.85); }
.s2-caster-pose { position: absolute; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .4s ease; }
.s2-caster-pose { filter: drop-shadow(0 0 13px rgba(var(--caster-glow), .3)); }
.s2-caster--hmomoh .s2-caster-pose { width: 117%; height: 117%; max-width: none; left: -8.5%; bottom: -18px; }
.s2-caster--panzer .s2-caster-pose { width: 106%; height: 106%; max-width: none; left: -3%; bottom: -12px; }
.s2-caster--kurra .s2-caster-pose { object-position: center 32%; }
.s2-caster-pose--alternate { opacity: 0; }
.s2-caster--jhinstar { --caster-glow: 177, 125, 244; }
.s2-caster--jhinstar .s2-caster-pose { inset: 0; object-fit: contain; }
.s2-caster--jhinstar .s2-caster-info h2 { font-size: clamp(20px, 2.2vw, 28px); letter-spacing:0; overflow-wrap:anywhere; }
.s2-caster-season { position: absolute; z-index: 4; left: 24px; bottom: 29px; color: #d4b97f; font-size: 9px; letter-spacing: 2px; }
.s2-caster-info { position: relative; z-index: 4; flex: 1; display: flex; flex-direction: column; padding: 0 24px 28px; }
.s2-caster-eyebrow { margin: 0 0 6px; color: #ac976e; font-size: 9px; letter-spacing: 1.8px; font-weight: 700; }
.s2-caster-info h2 { margin: 0; color: var(--caster-accent); font-size: clamp(32px, 3.2vw, 43px); font-weight: 800; line-height: 1.2; letter-spacing: -.5px; }
.s2-caster-role { color: #c6bfae; font-size: 12px; margin: 8px 0 22px; }
.s2-caster-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 17px; border-top: 1px solid #b99b542f; }
.s2-caster-links a { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; padding: 10px 12px; border: 1px solid #5a4c33; border-radius: 4px; color: #e0d5ba; text-decoration: none; font-size: 11px; font-weight: 700; transition: background .2s ease; }
.s2-caster-links .s2-caster-kick { grid-column: 1 / -1; background: linear-gradient(110deg, #bd8c2e, #f6d982); border-color: #e0b34f; color: #171207; }
.s2-caster--kurra .s2-caster-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s2-caster--kurra .s2-caster-links a:not(.s2-caster-kick) { padding-inline: 4px; font-size: 10px; gap: 4px; }
.s2-caster-links a:hover { background: #3b2e18; color: #fff1d3; }
.s2-caster-links a:focus-visible { outline: 3px solid #fff1ce; outline-offset: 3px; }
.s2-caster:focus-within { border-color: #ffe29c; box-shadow: 0 24px 50px #0007, 0 0 28px #bb8c2426; }
.s2-casters-signoff { text-align: center; margin-top: 35px; font-size: 10px; letter-spacing: 2.5px; color: #af9a6f; }
.s2-casters-signoff span { margin: 0 12px; color: #d9b460; }
@media (hover: hover) and (pointer: fine) {
  .s2-caster:hover { border-color: #ffe29c; box-shadow: 0 24px 50px #0007, 0 0 28px #bb8c2426; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .s2-casters-grid { gap: 16px; }
  .s2-caster-info { padding-inline: 17px; }
  .s2-caster-visual { height: 340px; }
  .s2-caster-badge { left: 16px; font-size: 8px; }
  .s2-caster-season { left: 18px; bottom: 58px; }
  .s2-caster-role { min-height: 38px; }
}
@media (max-width: 700px) {
  .s2-casters-page { padding: 40px 0 36px; }
  .s2-casters-grid { grid-template-columns: 1fr; max-width: 440px; gap: 24px; }
  .s2-casters-heading { margin-bottom: 28px; }
  .s2-casters-kicker { font-size: 9px; letter-spacing: 2px; }
  .s2-casters-heading p { font-size: 12px; }
  .s2-caster-visual { height: 390px; }
  .s2-caster-info { padding: 10px 20px 25px; }
  .s2-casters-signoff { font-size: 8px; letter-spacing: 1px; }
  .s2-casters-signoff span { margin: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .s2-caster, .s2-caster-pose, .s2-caster-links a { transition: none; }
}

.s2-caster--ericber { --caster-glow: 249, 194, 76; }
.s2-caster--dadace { --caster-glow: 249, 194, 76; }
.s2-caster--geo { --caster-glow: 40, 128, 255; }
.s2-caster--geo .s2-caster-visual { background-color: #090f24; }
/* The horizontal illustrations stay whole, including the speech bubble. */
.s2-caster--geo .s2-caster-pose { object-fit: contain; object-position: center; }
.s2-caster--dadace .s2-caster-pose { object-fit: contain; object-position: center bottom; }
.s2-caster-logo.s2-caster-logo--ericber { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; filter: none; }
.s2-caster--ericber .s2-caster-pose { width: 100%; height: 100%; left: 0; bottom: 0; object-fit: cover; object-position: center; }
.s2-caster[data-gallery] .s2-caster-pose { opacity: 0; }
.s2-caster[data-gallery] .s2-caster-pose.is-active { opacity: 1; }

/* Smaller background downloads on phones; original artwork is unchanged. */
@media (max-width: 640px) { :root {
  --lmp-img-52fe5e361449: url("../img/optimized/ambient-bg-battle-800-7a842d379cb2.webp");
} }