.hero h1{font-size:66px}
.section-heading>span,.section-kicker{letter-spacing:0}
@media(max-width:1180px){.hero h1{font-size:54px}}
@media(max-width:760px){.hero h1{font-size:44px}}

/* Layered hero artwork keeps the photography, gameplay cues, and character card independent. */
.landing{background-color:#09070e;background-image:radial-gradient(ellipse at 78% 12%,#6a3f6530,transparent 34%),radial-gradient(ellipse at 12% 42%,#58316e24,transparent 32%)}
.hero{isolation:isolate}
.hero:before{left:0;right:0}
.hero:after{content:"";position:absolute;z-index:-1;inset:0 0 30px;background:repeating-linear-gradient(90deg,transparent 0,transparent 119px,#ffffff05 120px),linear-gradient(120deg,#1b14201c,transparent 55%,#24142630);pointer-events:none}
.hero-visual{height:auto;min-height:0;aspect-ratio:4/3;border-radius:26px;isolation:isolate;background:#1a141c;overflow:visible}
.hero-visual .hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center;border:1px solid #d7ac7d66;border-radius:26px;box-shadow:0 22px 65px #0009,0 0 55px #e8af7540}
.scene-shade{position:absolute;inset:0;border-radius:26px;background:linear-gradient(180deg,#100c1612 36%,#0d0915a8 100%),linear-gradient(90deg,#100c1660,transparent 58%);pointer-events:none}
.visual-glow{z-index:-1;inset:-7% -5%;background:radial-gradient(ellipse,#b9767138,transparent 68%);filter:blur(56px)}
.story-badge{position:absolute;top:20px;left:20px;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #ffffff48;border-radius:20px;background:#17111fbf;color:#fff4e5;font-size:12px;backdrop-filter:blur(10px)}
.story-live-dot{width:7px;height:7px;border-radius:50%;background:#f0c58e;box-shadow:0 0 12px #f0c58e}
.word-panel{position:absolute;left:20px;top:28%;z-index:2;width:192px;padding:14px;border:1px solid #ffffff55;border-radius:12px;background:#17111fbb;box-shadow:0 10px 26px #0005;backdrop-filter:blur(12px)}
.word-label{display:block;color:#f4d6ad;font-size:11px;margin-bottom:10px}
.word-options{display:flex;flex-wrap:wrap;gap:7px}
.word-options b{border:1px solid #ffffff47;border-radius:7px;padding:6px 9px;color:#fff;font-size:12px;font-weight:500;background:#ffffff12}
.word-options .word-selected{border-color:#d9ad76;background:#dfb47a;color:#211720}
.player-panel{position:absolute;z-index:2;left:20px;bottom:20px;width:min(56%,420px);min-width:285px;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #ffffff45;border-radius:13px;background:#100d17d9;color:#fff;backdrop-filter:blur(12px);box-shadow:0 12px 28px #0005}
.player-play{width:36px;height:36px;flex:none;border:0;border-radius:50%;padding-left:3px;background:#e7bd86;color:#241720;font-size:13px}
.player-info{min-width:0;flex:1;display:grid;grid-template-columns:1fr auto;gap:7px 10px;align-items:center}
.player-info strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-info>span{grid-column:1/-1;height:3px;border-radius:2px;background:#ffffff38;overflow:hidden}
.player-info>span i{display:block;width:26%;height:100%;background:#e7bd86;border-radius:2px}
.player-info small{grid-column:1/-1;color:#c5bac9;font-size:10px}
.player-info em{font-style:normal;color:#817887;padding-inline:3px}
.player-sound{font-size:17px;color:#e7bd86}
.character-float{position:absolute;z-index:2;right:18px;bottom:20px;width:202px;display:grid;grid-template-columns:58px 1fr 14px;align-items:center;gap:10px;padding:8px;border:1px solid #ffffff55;border-radius:12px;background:#17111fdf;color:#fff;box-shadow:0 12px 30px #0007;backdrop-filter:blur(12px)}
.character-float img{width:58px;height:68px;object-fit:cover;object-position:center 28%;border-radius:7px}
.character-float div{display:flex;flex-direction:column;gap:4px;min-width:0}
.character-float small{font-size:9px;color:#d9b383}
.character-float strong{font-size:13px}
.character-float span{font-size:9px;color:#c7bdc9;white-space:nowrap}
.character-float>b{align-self:start;color:#e9c18b;font-size:13px}
.visual-caption{z-index:2;left:auto;right:20px;bottom:4px;background:transparent;border:0;padding:0;color:#f3e9dd9c;font-size:10px}
@media(max-width:1180px) and (min-width:761px){.hero{gap:16px}.hero-visual{border-radius:20px}.hero-visual .hero-scene,.scene-shade{border-radius:20px}.word-panel{left:14px;width:174px}.player-panel{left:14px;bottom:14px;width:calc(100% - 28px);min-width:0}.character-float{right:14px;top:14px;bottom:auto;width:174px;grid-template-columns:48px 1fr 12px}.character-float img{width:48px;height:56px}.character-float span{font-size:8px}.visual-caption{display:none}}
@media(max-width:760px){.hero:after{inset:0}.hero-visual{width:100%;aspect-ratio:4/3;max-height:none;min-height:0;margin:0 0 8px;border-radius:18px}.hero-visual .hero-scene,.scene-shade{border-radius:18px}.hero-visual .hero-scene{object-position:60% center}.story-badge{top:12px;left:12px;padding:7px 9px;font-size:10px}.word-panel{top:auto;left:12px;bottom:91px;width:155px;padding:10px;border-radius:9px}.word-label{font-size:9px;margin-bottom:7px}.word-options{gap:5px}.word-options b{padding:5px 7px;font-size:10px}.player-panel{left:12px;right:12px;bottom:12px;width:auto;min-width:0;padding:8px 10px;gap:9px;border-radius:10px}.player-play{width:31px;height:31px;font-size:11px}.player-info{grid-template-columns:1fr auto;gap:5px 7px}.player-info strong{font-size:10px}.player-info small{font-size:8px}.player-sound{font-size:14px}.character-float{right:12px;top:auto;bottom:91px;width:145px;grid-template-columns:40px 1fr 10px;gap:7px;padding:6px;border-radius:9px}.character-float img{width:40px;height:48px}.character-float small{font-size:8px}.character-float strong{font-size:11px}.character-float span{font-size:8px}.visual-caption{display:none}}
@media(max-width:380px){.hero h1{font-size:36px}.word-panel{width:136px}.character-float{width:132px}.word-options b{padding:4px 6px}.player-panel{left:9px;right:9px;bottom:9px}}