.interactive-heading{gap:55px;align-items:end;margin-top:0}
.student .wrap>.eyebrow{margin-bottom:22px}.student .heading-row{gap:55px}.student .heading-row h2{flex:1.2}.student .heading-row p{flex:1;max-width:570px}
.interaction-stage{position:relative;isolation:isolate}
.portrait-chat{position:absolute;z-index:3;width:38px;height:38px;padding:6px;border:1px solid currentColor;border-radius:12px;background:#08131bba;box-shadow:0 4px 22px #0005;transform:translate(-50%,-50%);pointer-events:none}
.portrait-chat svg,.chat-ghost svg,.portrait-cursor svg{display:block;width:100%;height:100%}
.portrait-cursor{position:absolute;left:0;top:0;z-index:4;width:30px;height:30px;filter:drop-shadow(0 2px 3px #0009);pointer-events:none;opacity:0;transform-origin:3px 3px}
.chat-ghost{position:absolute;top:0;left:0;width:36px;height:36px;z-index:5;pointer-events:none;opacity:0;filter:drop-shadow(0 0 7px currentColor)}
.chat-landing{position:absolute;z-index:5;width:34px;height:12px;border:1px solid;border-radius:50%;opacity:0;pointer-events:none}
.chapter.interactive{padding-bottom:0}
.interaction-total{display:flex;position:relative;align-items:center;justify-content:center;min-height:180px;margin-top:30px;overflow:hidden;border:1px solid #68dedc55;border-radius:8px;background:#091c25;color:#fff;text-align:center;text-decoration:none}
.interaction-total .profile-pan{position:absolute;left:0;top:0;width:100%;min-height:100%;pointer-events:none;will-change:transform;z-index:0;filter:brightness(1.2)}
.interaction-total{isolation:isolate}.interaction-total:after{z-index:1}.interaction-total .interaction-total-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.4em;z-index:10;background:linear-gradient(90deg,#06131cdd,#06131c88 50%,#06131cdd)}
.profile-snapshot{display:block;width:1280px;max-width:none;border:0;transform-origin:top left;pointer-events:none}
.interaction-total:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#06131ce6,#06131c99 50%,#06131ce6);pointer-events:none}
.interaction-total-copy{position:relative;z-index:1;padding:20px;font-size:clamp(12px,1.6vw,20px);font-weight:500;letter-spacing:.13em;text-shadow:0 2px 12px #000}
.interaction-total-copy strong{font-weight:800;color:#9efff1}.interaction-total-copy>span{margin-left:12px;color:#9efff1}
.interaction-total:hover{border-color:#9efff1}.interaction-total:focus-visible{outline:2px solid #9efff1;outline-offset:5px}
.motion-resting .portrait-cursor,.motion-resting .chat-ghost,.motion-resting .chat-landing{display:none}
@media(max-width:600px){.portrait-chat{width:32px;height:32px;padding:5px;border-radius:9px}.portrait-cursor{width:25px;height:25px}.interaction-total{min-height:119px}.interaction-total-copy{letter-spacing:.07em;padding:16px 9px}.interaction-total-copy>span{margin-left:3px}}
.character{display:block}.character-art{aspect-ratio:2/3;background:var(--surface)}
.character-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.character:hover img{transform:scale(1.035)}
.character-art .character-number{z-index:1;color:#fff;background:#07101599;padding:4px 7px;border-radius:3px}
.sprite-strip{grid-template-columns:1.5fr repeat(3,minmax(0,1.375fr))}
.sprite-tile img,.sprite-tile svg{display:block;width:100%;height:190px;object-fit:contain;image-rendering:pixelated}
.sprite-tile .warrior-frame{display:block;position:relative;height:190px;margin:0;overflow:hidden}
.sprite-tile .warrior-art{position:absolute;width:145%;height:145%;max-width:none;left:-22.5%;top:-18%;object-fit:contain}
.sprite-tile .sprite-frame{display:block;position:relative;height:190px;margin:0;overflow:hidden}
.sprite-tile .sprite-art{position:absolute;display:block;width:130%;height:130%;max-width:none;left:-15%;top:-12%;object-fit:contain;image-rendering:pixelated}
.sprite-tile canvas.warrior-art{image-rendering:pixelated}
/* The GIF has tighter transparent margins than the original Warrior PNG.
   Match the Enemy's visible height while keeping every animation frame in view. */
.sprite-tile .warrior-art[aria-hidden="true"]{width:auto;height:110%;left:50%;top:-2%;transform:translateX(-50%)}
/* Fit the King's tightly cropped GIF without clipping the antlers or throne. */
.sprite-tile[data-sprite="king"] .sprite-art{width:auto;height:104.5%;left:50%;top:-.75%;transform:translateX(-50%)}
.sprite-tile [hidden]{display:none!important}
.sprite-tile .sprite-idle{animation-play-state:paused}
.sprite-tile:hover .sprite-idle,.sprite-tile:focus-visible .sprite-idle{animation-play-state:running}
@media(max-width:600px){.sprite-tile img,.sprite-tile svg{height:130px}}
@media(max-width:600px){.sprite-tile .warrior-frame{height:130px}.sprite-tile .warrior-art{width:115%;height:115%;left:-7.5%;top:-7%}}
@media(max-width:600px){.sprite-tile .sprite-frame{height:130px}}
@media(max-width:600px){.sprite-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.interactive-heading h2{max-width:720px;flex:1.35;text-wrap:balance}
.interactive-heading p{max-width:430px;flex:1;padding-right:0;font-size:15px;line-height:1.8}
.tribal-scene{aspect-ratio:16/9;background:#061017;isolation:isolate}
.tribal-camera{position:absolute;inset:0;transform-origin:52% 60%;animation:village-camera 18s ease-in-out infinite alternate;will-change:transform}
.village-motion{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}.village-motion[hidden]{display:none}
.tribal-landscape{display:block;width:100%;height:100%;object-fit:contain}
.tribal-atmosphere{position:absolute;inset:0;pointer-events:none}
.campfire-glow{position:absolute;left:49.1%;top:66.4%;width:2.1%;height:4%;background:radial-gradient(ellipse,#ffde7777,#ff8b3033 42%,transparent 72%);mix-blend-mode:screen;animation:village-fire 2.3s ease-in-out infinite alternate}
.second-fire{left:51.1%;top:67.1%;width:2.5%;animation-delay:-1.2s;animation-duration:1.7s}
.village-ember{position:absolute;left:var(--ember-x);top:68.4%;width:2px;height:2px;background:#ffdd90;border-radius:50%;opacity:0;box-shadow:0 0 4px #fda75f;animation:village-ember 6.8s linear var(--ember-delay) infinite}
.sunset-breath{position:absolute;left:15%;top:17%;width:65%;height:45%;background:radial-gradient(ellipse,#ffe1a21c,transparent 65%);mix-blend-mode:screen;animation:village-sunlight 13s ease-in-out infinite alternate}
@keyframes village-camera{from{transform:scale(1.015) translate(.3%,0)}to{transform:scale(1.06) translate(-.7%,.3%)}}
@keyframes village-fire{0%,100%{opacity:.5;transform:scale(1.2)}27%{opacity:1;transform:scale(1.8)}53%{opacity:.65;transform:scale(1.35)}76%{opacity:1;transform:scale(2)}}
@keyframes village-ember{0%{opacity:0;transform:translate(0,0)}15%{opacity:.7}70%{opacity:.35}100%{opacity:0;transform:translate(var(--ember-drift),-65px)}}
@keyframes village-sunlight{from{opacity:.2}to{opacity:.75}}
@media(max-width:900px){.interactive-heading{gap:25px}.interactive-heading p{font-size:14px}}
@media(max-width:600px){.interactive-heading p{max-width:none;margin-top:24px;font-size:14px}.tribal-scene{aspect-ratio:16/9}.village-ember{width:1px;height:1px}}
@media(prefers-reduced-motion:reduce){.tribal-camera{transform:none;will-change:auto}.tribal-atmosphere{display:none}}

/* Normalize the standing characters; give the seated King room for his throne. */
.sprite-tile[data-sprite] .warrior-art[aria-hidden="true"],
.sprite-tile[data-sprite] .sprite-art[aria-hidden="true"]{width:auto;max-width:none;left:50%;transform:translateX(-50%);object-fit:contain}
.sprite-tile[data-sprite="warrior"] .warrior-art[aria-hidden="true"]{height:92.8132%;top:7.1978%}
.sprite-tile[data-sprite="king"] .sprite-art[aria-hidden="true"]{height:296px;top:3px}
.sprite-tile[data-sprite="enemy"] .sprite-art[aria-hidden="true"]{height:113.2381%;top:-1.9333%}
.wind-river-title{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;height:auto;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 5px 5px #0008)}

/* Body-scale comparison: the throne extends above the seated character. */
.sprite-strip{align-items:end}
.sprite-tile[data-sprite="king"] .sprite-frame{height:290px}
@media(max-width:600px){
 .sprite-strip{grid-template-columns:1fr 1.25fr 1fr}
 .sprite-tile[data-sprite="king"] .sprite-frame{height:198.42px}
 .sprite-tile[data-sprite="king"] .sprite-art[aria-hidden="true"]{height:202.53px;top:2.05px}
}
