/* Manga-adventure treatment for the post-hero story sections. */
.section{isolation:isolate}.section-number{z-index:5;padding:10px 7px;background:var(--ink);color:#fff;border:2px solid #fff;box-shadow:3px 3px 0 var(--red)}

/* Grand Ocean — a colorful double-page map spread. */
.world{padding-top:165px;background:#ffefbb;color:#273b4a}
.world:before{z-index:-2;opacity:.3;background-image:radial-gradient(circle,#e84a31 1.4px,transparent 1.6px),linear-gradient(118deg,transparent 48%,rgba(11,123,170,.09) 49%,transparent 50%);background-size:18px 18px,36px 36px;mask-image:linear-gradient(90deg,#000,transparent 48%,#000)}
.world:after{content:"GRAND OCEAN";position:absolute;z-index:-1;right:-2vw;top:70px;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(100px,17vw,270px);line-height:.8;letter-spacing:-.04em;color:rgba(8,169,209,.11);transform:rotate(-4deg);white-space:nowrap}
.world .section-head{position:relative;z-index:2;align-items:center}
.world .section-head>div{position:relative;padding:28px 38px 30px;background:#fff9e7;border:4px solid var(--ink);box-shadow:10px 11px 0 var(--ocean);transform:rotate(-1.5deg);clip-path:polygon(0 7%,96% 0,100% 89%,5% 100%)}
.world .section-head>div:after{content:"!";position:absolute;right:-22px;top:-38px;width:61px;height:61px;display:grid;place-items:center;border:4px solid var(--ink);border-radius:50%;background:var(--gold);font-family:Impact,sans-serif;font-size:38px;color:var(--red);transform:rotate(12deg)}
.world .section-head>p{padding:19px 22px;background:var(--red);color:#fff;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--gold);transform:rotate(2deg);font-weight:700}
.world .section-head h2{font-family:Impact,"Arial Black",sans-serif;font-weight:400;line-height:.86;letter-spacing:-.025em;text-transform:uppercase;transform:rotate(-1deg)}
.world-frame{height:690px;border:5px solid var(--ink);outline:0;border-radius:4px;box-shadow:13px 14px 0 var(--red),22px 23px 0 var(--gold);transform:rotate(.6deg);clip-path:polygon(2% 0,100% 3%,98% 100%,0 97%)}
.world-frame>img{transform:scale(1.025);transition:transform 1s var(--ease)}.world-frame:hover>img{transform:scale(1.07)}
.map-ui{left:34px;bottom:34px;padding:18px 22px;background:var(--navy);border:4px solid var(--ink);border-left:9px solid var(--gold);box-shadow:6px 7px 0 var(--red);transform:rotate(-2deg)}
.map-ui b{font-family:Impact,"Arial Black",sans-serif;font-weight:400;letter-spacing:.035em}
.route-dot{border:4px solid var(--ink);background:var(--gold);box-shadow:0 0 0 5px #fff,5px 5px 0 var(--red)}
.island-strip{gap:16px;margin-top:62px;border:0}.island-strip article{position:relative;min-height:125px;padding:24px 20px;border:4px solid var(--ink)!important;box-shadow:7px 8px 0 var(--navy);background:#fff9e9;transition:.3s}.island-strip article:nth-child(1){transform:rotate(-2deg);background:#61dcf4}.island-strip article:nth-child(2){transform:translateY(14px) rotate(1.5deg);background:#ff7852}.island-strip article:nth-child(3){transform:rotate(-1deg);background:var(--gold)}.island-strip article:nth-child(4){transform:translateY(10px) rotate(2deg);background:#fff}.island-strip article:hover{transform:translateY(-8px) rotate(-1deg)}.island-strip b{display:inline-grid;width:31px;height:31px;place-items:center;border:3px solid var(--ink);border-radius:50%;background:#fff;color:var(--red);font-family:Impact,sans-serif;font-size:13px}.island-strip span{font-family:Impact,"Arial Black",sans-serif;font-size:16px;font-weight:400}.island-strip small{font-weight:800;line-height:1.5;color:#344450}

/* Original Crew — bold cyan manga panel and speech-box copy. */
.heroes{min-height:1080px;background:#35c9e9;color:var(--ink)}
.heroes:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle,#0b6d9d 1.6px,transparent 1.8px);background-size:17px 17px;opacity:.3;mask-image:linear-gradient(90deg,#000,transparent 50%)}
.heroes:after{content:"";position:absolute;z-index:-1;width:1050px;height:1050px;left:-240px;top:50%;transform:translateY(-50%) rotate(9deg);background:repeating-conic-gradient(from 0deg,var(--gold) 0 4deg,transparent 4deg 10deg);border-radius:50%;opacity:.72}
.heroes-layout{position:relative;z-index:2;gap:5vw}
.heroes-image{padding:12px;background:#fff;border:5px solid var(--ink);box-shadow:14px 16px 0 var(--red),24px 26px 0 var(--gold);transform:rotate(-3deg);clip-path:polygon(4% 0,100% 3%,96% 100%,0 95%)}
.heroes-image img{filter:saturate(1.12) contrast(1.04)}
.poster-stamp{left:-22px;bottom:20px;border:5px double #7c2519;box-shadow:5px 5px 0 var(--ink);font-family:Impact,sans-serif}
.heroes-copy{position:relative;padding:45px 42px;background:#fff9e8;border:5px solid var(--ink);box-shadow:12px 13px 0 var(--red);transform:rotate(1deg);clip-path:polygon(2% 0,100% 4%,96% 100%,0 95%)}
.heroes-copy:before{content:"";position:absolute;left:-32px;top:33%;width:45px;height:45px;background:#fff9e8;border-left:5px solid var(--ink);border-bottom:5px solid var(--ink);transform:rotate(45deg)}
.heroes-copy .kicker{color:var(--ink)}.heroes-copy .kicker span{color:var(--red)}
.heroes-copy h2{font-family:Impact,"Arial Black",sans-serif;font-weight:400;line-height:.86;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);text-shadow:none;transform:rotate(-1deg)}.heroes-copy h2 em{color:var(--red)}
.heroes-copy>p:not(.kicker){font-size:13px;font-weight:600;line-height:1.75;color:#3d4a50}.heroes-copy strong{color:var(--red)}
.heroes-copy blockquote{margin:26px -18px 28px;padding:20px 24px;border:4px solid var(--ink);background:var(--gold);box-shadow:6px 7px 0 var(--ocean);font-family:Impact,"Arial Black",sans-serif;font-size:20px;font-style:normal;line-height:1.25;letter-spacing:.02em;color:var(--ink);transform:rotate(-1.5deg)}
.power-tags span{padding:10px 13px;border:3px solid var(--ink);background:#fff;color:var(--navy);font-weight:900;box-shadow:3px 3px 0 var(--gold);transform:rotate(-1deg)}.power-tags span:nth-child(even){transform:rotate(2deg);background:#e5fbff}

/* Gameplay — three loud, offset comic panels. */
.adventure{padding-top:165px;background:#fff7d9;color:var(--ink)}
.adventure:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(120deg,transparent 48%,rgba(7,132,181,.1) 49%,transparent 50%),radial-gradient(circle at 80% 25%,rgba(255,89,50,.14) 0 2px,transparent 2.3px);background-size:42px 42px,15px 15px}
.adventure:after{content:"BAM!";position:absolute;z-index:-1;right:1vw;top:70px;font-family:Impact,sans-serif;font-size:clamp(120px,20vw,300px);color:rgba(231,60,45,.09);transform:rotate(8deg)}
.adventure .section-head{position:relative;z-index:2;margin-bottom:95px}.adventure .section-head>div{padding:28px 38px;background:var(--navy);border:5px solid var(--ink);box-shadow:10px 11px 0 var(--gold);transform:rotate(1deg);clip-path:polygon(2% 0,100% 4%,97% 100%,0 94%)}
.adventure .section-head h2{font-family:Impact,"Arial Black",sans-serif;font-weight:400;line-height:.86;letter-spacing:-.02em;text-transform:uppercase;color:#fff}.adventure .section-head h2 em{color:var(--gold)}
.feature-grid{gap:28px;align-items:start}
.feature-grid article{min-height:430px;padding:32px;border:5px solid var(--ink);border-radius:0;box-shadow:11px 12px 0 var(--navy);overflow:hidden}
.feature-grid article:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(0,0,0,.16) 1.4px,transparent 1.6px);background-size:14px 14px;opacity:.28}
.feature-grid article:nth-child(1){background:#5bdaf2;transform:rotate(-2deg)}.feature-grid article:nth-child(2){background:#ff6f4d;transform:translateY(34px) rotate(1.5deg);box-shadow:11px 12px 0 var(--gold)}.feature-grid article:nth-child(3){background:var(--gold);transform:rotate(-1deg);box-shadow:11px 12px 0 var(--red)}
.feature-grid article:hover{transform:translateY(-12px) rotate(1deg)}.feature-grid article:nth-child(2):hover{transform:translateY(20px) rotate(-1deg)}
.feature-grid article>span{top:27px;left:28px;font-size:24px;color:var(--ink);text-shadow:2px 2px 0 #fff}
.feature-grid article>i{width:84px;height:84px;border:5px solid var(--ink);background:#fff;box-shadow:inset 0 0 0 5px #dff9ff,6px 7px 0 var(--navy);font-size:11px}
.feature-grid small{font-size:8px;color:var(--ink)}.feature-grid h3{font-family:Impact,"Arial Black",sans-serif;font-size:44px;font-weight:400;line-height:.92;text-transform:uppercase}.feature-grid p{font-size:12px;font-weight:700;line-height:1.65;color:#293a43}

/* Final call — manga speed-line climax. */
.sail:before{content:"";position:absolute;z-index:-1;width:125vw;height:125vw;border-radius:50%;background:repeating-conic-gradient(from -10deg,rgba(255,255,255,.18) 0 1deg,transparent 1deg 6deg);animation:spin 50s linear infinite}
.sail:after{background:radial-gradient(circle,rgba(5,48,71,.08) 0 34%,rgba(3,24,39,.89) 72%)}
.sail-copy{padding:52px 60px;background:rgba(3,33,53,.72);border:4px solid #fff;box-shadow:11px 12px 0 var(--red),20px 21px 0 var(--gold);transform:rotate(-1deg);clip-path:polygon(2% 0,100% 4%,97% 100%,0 94%)}
.sail h2{font-family:Impact,"Arial Black",sans-serif;font-weight:400;line-height:.85;letter-spacing:-.02em;text-transform:uppercase}.sail h2 em{color:var(--gold)}

@media(max-width:1050px){.world .section-head>div,.adventure .section-head>div{max-width:720px}.world .section-head>p{margin-top:35px}.heroes-copy{padding:34px 30px}.heroes-copy h2{font-size:56px}.world-frame{height:580px}}
@media(max-width:760px){.world,.adventure{padding-top:110px}.world:after,.adventure:after{font-size:120px}.world .section-head>div,.adventure .section-head>div{padding:22px 20px}.world .section-head>div:after{right:-7px;top:-30px;width:52px;height:52px}.world .section-head>p{transform:none}.world-frame{height:430px;box-shadow:8px 9px 0 var(--red),14px 15px 0 var(--gold)}.map-ui{left:14px;right:14px;bottom:14px;transform:none}.island-strip{margin-top:45px}.island-strip article,.island-strip article:nth-child(n){min-height:105px;transform:none}.heroes:after{width:720px;height:720px;left:-380px}.heroes-image{clip-path:none}.heroes-copy{padding:34px 23px;clip-path:none;transform:none}.heroes-copy:before{display:none}.heroes-copy h2{font-size:50px}.heroes-copy blockquote{margin-left:0;margin-right:0}.feature-grid article,.feature-grid article:nth-child(n){min-height:350px;transform:none}.feature-grid article:nth-child(n):hover{transform:translateY(-8px)}.sail-copy{padding:42px 22px;clip-path:none}.sail h2{font-size:clamp(54px,16vw,88px)}}
@media(max-width:430px){.world-frame{height:350px}.map-ui small{display:none}.map-ui b{font-size:16px}.poster-stamp{left:-5px}.heroes-copy h2{font-size:44px}.feature-grid h3{font-size:38px}}

/* Refined comic treatment: complete frames, quieter textures, no radial bursts. */
.world .section-head>div,
.adventure .section-head>div,
.world-frame,
.heroes-image,
.heroes-copy,
.sail-copy{
  clip-path:none;
  transform:none;
}

.world .section-head>div,
.adventure .section-head>div{
  border-radius:18px;
  box-shadow:8px 8px 0 var(--ocean);
}

.adventure .section-head>div{
  box-shadow:8px 8px 0 var(--gold);
}

.world .section-head>p{
  transform:none;
  border-radius:14px;
}

.world-frame{
  width:min(1180px,100%);
  border-radius:22px;
  box-shadow:9px 9px 0 var(--red);
}

.map-ui{
  transform:none;
  border-radius:12px;
}

.island-strip{
  width:min(1180px,100%);
  gap:18px;
}

.island-strip article,
.island-strip article:nth-child(n){
  transform:none;
  border-radius:16px;
  box-shadow:6px 6px 0 var(--navy);
}

.island-strip article:hover,
.island-strip article:nth-child(n):hover{
  transform:translateY(-7px);
}

.heroes:after,
.sail:before{
  display:none;
}

.heroes{
  background:
    radial-gradient(circle at 18% 26%,rgba(255,255,255,.24) 0 2px,transparent 2.5px) 0 0/22px 22px,
    linear-gradient(145deg,#54d9f5 0%,#28b8dc 100%);
}

.heroes-layout{
  width:min(1180px,100%);
}

.heroes-image{
  border-radius:22px;
  box-shadow:10px 10px 0 var(--red);
}

.heroes-image img{
  border-radius:12px;
}

.heroes-copy{
  border-radius:22px;
  box-shadow:10px 10px 0 var(--red);
}

.heroes-copy:before{
  display:none;
}

.heroes-copy h2,
.heroes-copy blockquote,
.power-tags span,
.power-tags span:nth-child(even){
  transform:none;
}

.heroes-copy blockquote{
  margin:26px 0 28px;
  border-radius:14px;
}

.power-tags span{
  border-radius:999px;
}

.feature-grid{
  width:min(1180px,100%);
  align-items:stretch;
}

.feature-grid article,
.feature-grid article:nth-child(n){
  transform:none;
  border-radius:20px;
  box-shadow:8px 8px 0 var(--navy);
}

.feature-grid article:nth-child(2){
  box-shadow:8px 8px 0 var(--gold);
}

.feature-grid article:nth-child(3){
  box-shadow:8px 8px 0 var(--red);
}

.feature-grid article:hover,
.feature-grid article:nth-child(n):hover{
  transform:translateY(-8px);
}

.sail-sun{
  display:none;
}

.sail:after{
  background:
    linear-gradient(90deg,rgba(3,24,39,.92),rgba(3,24,39,.56) 48%,rgba(3,24,39,.9)),
    radial-gradient(circle at 78% 30%,rgba(84,217,245,.16),transparent 34%);
}

.sail-copy{
  border-radius:24px;
  box-shadow:9px 9px 0 var(--red);
}

@media(max-width:760px){
  .world-frame,.heroes-image,.heroes-copy,.sail-copy{border-radius:16px}
  .world-frame{box-shadow:6px 6px 0 var(--red)}
  .heroes-image,.heroes-copy{box-shadow:7px 7px 0 var(--red)}
  .feature-grid article,.feature-grid article:nth-child(n){box-shadow:6px 6px 0 var(--navy)}
}

/* Hero UI and top bar — matched to the rounded manga-panel system below. */
.header{
  height:90px;
  padding-inline:clamp(24px,4vw,64px);
  border-bottom:3px solid rgba(255,201,40,.82);
  background:linear-gradient(180deg,rgba(3,24,39,.92),rgba(3,24,39,.64));
  backdrop-filter:blur(8px);
  box-shadow:0 4px 0 rgba(231,60,45,.65);
}

.header.scrolled{
  height:76px;
  border-bottom-color:var(--gold);
  background:rgba(3,24,39,.94);
}

.brand{gap:11px}
.brand>i{
  width:38px;
  height:38px;
  border:3px solid var(--ink);
  background:var(--gold);
  color:var(--ink);
  box-shadow:3px 3px 0 var(--red);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:15px;
  transform:none;
}

.brand span{
  font-size:21px;
  text-shadow:3px 3px 0 var(--ink);
}

.brand small{
  font-size:8px;
  font-weight:800;
  color:#fff;
}

.header nav{gap:10px}
.header nav a{
  padding:10px 14px;
  border:2px solid transparent;
  border-radius:10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}

.header nav a:hover{
  border-color:var(--gold);
  background:rgba(255,201,40,.12);
  color:var(--gold);
  transform:none;
}

.nav-cta{
  padding:13px 17px;
  border:3px solid var(--ink);
  border-radius:10px;
  background:var(--gold);
  color:var(--ink);
  font-size:10px;
  box-shadow:4px 4px 0 var(--red);
}

.nav-cta b{color:var(--ink)}
.sun,.cloud{display:none}

.hero:after{
  content:"";
  position:absolute;
  z-index:-3;
  inset:90px 48% 0 0;
  pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.25) 1.2px,transparent 1.6px) 0 0/18px 18px;
  opacity:.16;
  mask-image:linear-gradient(90deg,#000,transparent 88%);
}

.hero-copy{width:min(690px,48vw)}
.hero .kicker{
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
}

.hero h1{
  margin-top:28px;
  transform:none;
}

.rope-line span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:2px solid var(--gold);
  border-radius:50%;
  background:var(--ink);
  color:var(--gold);
  font-size:8px;
}

.hero h2{
  font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(42px,4.4vw,72px);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-shadow:3px 3px 0 var(--ink);
}

.hero h2 em{
  color:var(--gold);
  font-style:normal;
  text-shadow:3px 3px 0 var(--red);
}

.hero-copy>p:not(.kicker){
  max-width:590px;
  font-size:13px;
  font-weight:600;
  line-height:1.7;
}

.hero .primary-btn{
  min-width:270px;
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:6px 6px 0 var(--red);
  transform:none;
}

.hero .primary-btn:hover{
  transform:translateY(-4px);
  box-shadow:7px 9px 0 var(--red);
}

.watch{
  gap:12px;
  font-size:9px;
  font-weight:900;
}

.watch i{
  width:44px;
  height:44px;
  border:3px solid var(--gold);
  background:var(--ink);
  box-shadow:4px 4px 0 var(--red);
}

@media(max-width:1050px){
  .brand small{display:none}
  .header nav a{padding-inline:10px}
}

@media(max-width:760px){
  .header{height:70px;border-bottom-width:2px}
  .brand>i{width:34px;height:34px}
  .brand span{font-size:18px}
  .hero-copy{width:100%}
  .hero:after{inset:70px 0 0 0;opacity:.1}
  .hero .kicker{font-size:8px}
  .hero h2{font-size:clamp(40px,12vw,60px)}
}