/* A arte da landing é um único PNG estático original.
   Apenas os controles de entrada e botões são elementos HTML reais. */
:root{font-family:Georgia,"Times New Roman",serif;color:#e9dfcf;background:#080708}
*{box-sizing:border-box}html,body{padding:0;margin:0;min-height:100%;}body{overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer}a{color:inherit}
.sr-only{position:absolute!important;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.poster{width:100%;position:relative;background:#080708;isolation:isolate;line-height:0}
.poster-image{width:100%;height:auto;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.poster-login{position:absolute;inset:0;margin:0;pointer-events:none}
.overlay-input{position:absolute;display:block;pointer-events:auto;outline:none;border:0;border-radius:0;background:#09090a;color:#e4d9c8;font:clamp(11px,0.96vw,19px) Georgia,serif;line-height:1.3;padding:0 2px;box-shadow:none}
.overlay-input::placeholder{color:#716960;opacity:1}
.overlay-input:focus-visible{outline:1px solid #a65e4b;outline-offset:2px}
.user-field{left:66.4%;top:47.5%;width:17.3%;height:3.8%}
.password-field{left:66.4%;top:53.98%;width:16.6%;height:3.8%}
.hotspot{position:absolute;display:block;pointer-events:auto;border:0;background:transparent;padding:0;outline-offset:2px;line-height:1}
.hotspot:focus-visible,.remember-hitbox:focus-within{outline:2px solid #f2cf99}
.eye-hotspot{left:83.5%;top:53.5%;width:2.2%;height:4.6%}
.forgot-hotspot{left:77.05%;top:58.9%;width:8.7%;height:2.6%}
.enter-hotspot{left:63.9%;top:63.2%;width:21.6%;height:5.7%}
.register-hotspot{left:64.55%;top:69.9%;width:19.9%;height:4.65%}
.enter-hotspot:hover,.register-hotspot:hover{box-shadow:inset 0 0 0 1px rgba(255,220,175,.4)}
.remember-hitbox{position:absolute;left:63.7%;top:59.2%;width:1.3%;height:2.2%;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center}
.remember-hitbox input{appearance:none;-webkit-appearance:none;cursor:pointer;position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;background:transparent}
.remember-hitbox input:checked{background:linear-gradient(135deg,transparent 35%,#e9d1b9 35% 48%,transparent 48% 54%,#e9d1b9 54% 64%,transparent 64%);background-size:100% 100%}
.notice{position:absolute;z-index:3;top:78%;left:61.8%;width:26%;line-height:1.5;padding:13px 35px 13px 13px;background:rgba(10,8,9,.96);border:1px solid #943f32;color:#e9d4bd;font:clamp(11px,.83vw,15px)/1.5 Georgia,serif;box-shadow:0 6px 30px #0009}
.notice[hidden],.mobile-notice[hidden]{display:none}.notice a{display:inline-block;color:#f2705d;margin:6px 0 0;text-decoration:underline}.notice button{position:absolute;right:7px;top:2px;font:25px Arial,sans-serif;background:none;color:#d4bba1;border:0}
.mobile-form{display:none}
@media(max-width:820px){
  .poster{height:42svh;overflow:hidden}
  .poster-image{position:absolute;top:0;left:50%;width:auto;height:100%;transform:translateX(-50%);max-width:none}
  .poster-login{display:none}
  .notice{display:none!important}
  .mobile-form{display:block;padding:25px 20px 38px;background:#090708;border-top:1px solid #792020;max-width:560px;margin:auto}
  .mobile-form h1{text-align:center;font:900 44px/1 Impact,"Arial Narrow",sans-serif;letter-spacing:.04em;margin:0 0 12px}
  .mobile-form h1 span{color:#d5262b}.mobile-form>p{text-align:center;color:#e6c9a7;font-size:14px;letter-spacing:.1em}
  .mobile-form form{display:grid;gap:10px}.mobile-form form>label:not(.mobile-options label){color:#bdb2a3;font-size:12px;margin-top:8px}
  .mobile-form input[type=text],.mobile-form input[type=password]{display:block;width:100%;height:49px;border:1px solid #55443e;background:#0a0909;padding:0 14px;color:#e9d5bf;border-radius:0}
  .mobile-password-wrap{position:relative}.mobile-password-wrap button{position:absolute;right:5px;top:5px;width:40px;height:39px;border:0;background:none;color:#b8a591}
  .mobile-options{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#cab4a1;margin:4px 0}
  .mobile-options label{display:flex;gap:6px;align-items:center}.mobile-options input{accent-color:#c7262a}
  .mobile-options button{border:0;background:none;color:#c9a58d;padding:5px}
  .mobile-enter,.mobile-register,.mobile-demo{width:100%;height:47px;margin-top:7px;font-size:15px;font-weight:700;letter-spacing:.12em;border:1px solid #994735;background:#91121c;color:#f2dece}
  .mobile-register{background:#100c0c;border:1px solid #a66b44;margin-top:13px}
  .mobile-demo{display:flex;align-items:center;justify-content:center;text-decoration:none;background:none;border-color:#584336;margin-top:12px;font-size:12px}
  .mobile-notice{padding:12px;border:1px solid #90483b;color:#dbc3aa;font-size:12px;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}


.poster-login{z-index:3}
.down-hotspot{position:absolute;left:72.1%;top:90.1%;width:3.1%;height:4.2%;z-index:3;display:block;border-radius:50%}
.down-hotspot:focus-visible{outline:2px solid #efbd79;outline-offset:2px}
.skip-link{position:absolute;top:-80px;left:8px;padding:10px 16px;background:#f3e2ce;color:#180b0c;z-index:50;font:700 14px sans-serif}.skip-link:focus{top:8px}
.chapter-nav{position:sticky;top:0;z-index:10;background:#0b080aec;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;gap:clamp(15px,4vw,72px);padding:18px 22px;border-top:1px solid #7b2926;border-bottom:1px solid #4a201d}
.chapter-nav a{font:700 11px 'Cinzel',Georgia,serif;letter-spacing:.12em;text-decoration:none;color:#d7c1a7;white-space:nowrap;transition:color .2s}
.chapter-nav a:hover,.chapter-nav a:focus-visible{color:#fb6356}.chapter-nav a>span{color:#c82b28;margin-right:8px;font:20px Georgia,serif;vertical-align:middle}
.chapter-nav a.nav-play{color:#f1d9c0;border:1px solid #a34031;padding:12px 17px;background:#4d1214}.chapter-nav .nav-play span{font:14px Georgia,serif;color:#f4bbb0;margin:0 0 0 8px}
.chapter{padding:clamp(76px,8.2vw,135px) 22px;position:relative;overflow:hidden;background:#0a080a}
.chapter-wrap{max-width:1260px;margin:0 auto;position:relative;z-index:1}
.kicker{font:700 11px 'Cinzel',Georgia,serif;letter-spacing:.2em;color:#ca6a56;margin:0 0 29px}.kicker span{font-size:18px;color:#e83331;margin-right:16px;border-right:1px solid #955042;padding-right:17px}
.chapter h2,.chapter-end h2{font:900 clamp(53px,6vw,90px)/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:.025em;text-transform:uppercase;color:#e8d5ba;margin:0 0 29px;text-shadow:2px 3px #000}
.chapter h2 em,.chapter-end h2 em{font-style:normal;color:#ce2226}
.chapter p:not(.kicker),.chapter-end p:not(.kicker){font:14px/1.9 'Noto Serif',Georgia,serif;color:#bda998;max-width:590px}
.chapter p strong{color:#e0cfb6;font-weight:600}.chapter-intro{font-size:16px!important;color:#d4beaa!important}
.journey-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(70px,7vw,130px);align-items:center}
.chapter-journey{background:radial-gradient(circle at 76% 45%,rgba(93,32,34,.28),transparent 54%),#090809;border-top:1px solid #4d1e20}
.chapter-journey::after{content:'忍';font:290px Georgia,serif;position:absolute;bottom:-96px;left:-20px;color:#55202536;pointer-events:none}
.ink-link{display:inline-block;margin-top:27px;color:#f0bea1!important;border-bottom:1px solid #aa2f29;padding:0 0 12px;text-decoration:none;font:800 15px 'Barlow Condensed',sans-serif;letter-spacing:.18em}.ink-link span{font-size:21px;margin-left:12px;vertical-align:middle}
.rank-timeline{border-left:1px solid #61322c;margin-left:25px;padding-left:43px}
.rank{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:0 0 47px;margin-bottom:39px;border-bottom:1px solid #4e292650}.rank:last-child{padding-bottom:0;margin-bottom:0;border:0}
.rank-level{position:absolute;top:0;left:-78px;background:#140b0c;color:#e8c5aa;padding:14px 8px;width:65px;text-align:center;white-space:nowrap;border:1px solid #8a3e33;font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:.08em}.rank-highlight .rank-level{background:#a01920;border-color:#e73d37;color:#fff}
.rank-caption{display:block;font:600 10px 'Cinzel',serif;letter-spacing:.12em;color:#ac6c57}.rank h3{font:800 29px/1 'Barlow Condensed',sans-serif;letter-spacing:.065em;margin:9px 0}.rank p{margin:0!important;font-size:12px!important;line-height:1.6!important}.rank-glyph{font:56px Georgia,serif;color:#8f2e28;opacity:.54;font-weight:400}
.chapter-ways{background:linear-gradient(180deg,#180d0f,#090708)}
.chapter-heading{text-align:center;margin:0 auto 58px;max-width:730px}.chapter-heading p{margin-left:auto!important;margin-right:auto!important}
.way-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.way{min-height:430px;display:flex;flex-direction:column;justify-content:flex-end;padding:27px 30px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #813529;background:radial-gradient(ellipse at 50% 35%,#61252862,transparent 60%),#110a0d;transition:transform .2s,border-color .2s}
.way:hover{transform:translateY(-4px);border-color:#df4238}.way::before{content:'';position:absolute;inset:9px;border:1px solid #783c2c72;pointer-events:none}.way::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0a0709,transparent 82%)}
.way-kanji{position:absolute;top:35px;left:50%;transform:translateX(-50%) rotate(-8deg);font:190px/.95 Georgia,serif;color:#b8413338}.way-nin .way-kanji{color:#e861353c}.way-gen .way-kanji{color:#a57a8a37}
.way-number{position:absolute;top:29px;left:30px;font:700 10px 'Cinzel',serif;letter-spacing:.17em;color:#ba7864}
.way h3{margin:0 0 14px;font:900 42px 'Barlow Condensed',sans-serif;letter-spacing:.08em;color:#efdbc2}.way p{max-width:350px!important;color:#c9b7a5!important;font-size:13px!important;line-height:1.75!important;margin:0 0 22px}
.way-footer{padding-top:15px;border-top:1px solid #773d32;width:100%;font:600 10px 'Cinzel',serif;letter-spacing:.15em;color:#c87e68}
.chapter-world{background:#160d0f;border-top:1px solid #472024;isolation:isolate}
.world-backdrop{position:absolute;inset:0;background:url('/assets/landing-reference.png') center 63%/cover no-repeat;opacity:.19;filter:grayscale(.22);z-index:-2}
.chapter-world::after{position:absolute;inset:0;content:'';z-index:-1;background:linear-gradient(90deg,#0c090bef,#0a090bc7 63%,#080809e3)}
.world-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:80px;align-items:center}
.world-emblem{border:2px solid #7b3730;outline:1px solid #77352d;outline-offset:16px;border-radius:50%;width:280px;height:280px;display:grid;justify-items:center;align-content:center;background:radial-gradient(circle,#72242b4f,transparent 71%);transform:rotate(-6deg)}.world-emblem span{font:150px/1 Georgia,serif;color:#a93130}.world-emblem small{text-align:center;font:600 13px/1.5 'Cinzel',serif;letter-spacing:.17em;color:#d0ae98}
.development-line{display:inline-block;border-left:3px solid #b22a28;background:#281012c4;padding:12px 17px;margin-top:25px;font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:.17em;color:#dec0ab}
.chapter-end{padding:102px 22px 108px;text-align:center;background:radial-gradient(ellipse at 50% -40%,#61202555,transparent 60%),#080708;border-top:1px solid #5a2527}
.chapter-end h2{font-size:clamp(53px,6vw,80px)}.chapter-end p:not(.kicker){margin:0 auto 28px}
.final-button{display:inline-flex;align-items:center;justify-content:center;gap:35px;min-width:300px;padding:20px 28px;text-decoration:none;color:#f0d7c5;background:linear-gradient(110deg,#7e1118,#c32429,#82151a);font:700 13px 'Cinzel',serif;letter-spacing:.1em;border:1px solid #d04432;clip-path:polygon(3% 0,97% 0,100% 18%,97% 100%,3% 100%,0 82%)}
.final-button:hover{filter:brightness(1.2)}
.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:27px 5%;background:#050506;border-top:1px solid #3a1b1c;color:#85736e;font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:.12em}
.footer span{color:#e3ceb5;font:900 20px 'Barlow Condensed',sans-serif;letter-spacing:.1em}.footer span em{font-style:normal;color:#d42c2b}.footer a{text-decoration:none}.footer a:hover{color:#e9d1b2}
@media(max-width:900px){.journey-layout,.world-layout{grid-template-columns:1fr;gap:52px}.world-emblem{margin:0 auto;transform:scale(.88) rotate(-6deg)}.way-list{gap:9px}.way{padding:24px 18px}.way h3{font-size:34px}}
@media(max-width:820px){.down-hotspot{display:none}.chapter-nav{gap:18px;flex-wrap:wrap;padding:13px 8px}.chapter-nav a{font-size:10px}.chapter-nav a>span{font-size:15px;margin-right:4px}.chapter-nav a.nav-play{padding:9px}.way-list{grid-template-columns:1fr;gap:15px}.way{min-height:280px}.way-kanji{font-size:135px;top:17px}.chapter{padding:76px 18px}.chapter h2{font-size:55px}.rank-timeline{margin-left:36px}.chapter-journey::after{font-size:160px;bottom:0}}
@media(max-width:430px){.chapter-nav{gap:12px}.chapter-nav a{font-size:9px}.chapter-nav .nav-play{width:100%;text-align:center}.chapter h2,.chapter-end h2{font-size:47px}.chapter{padding:65px 18px}.rank-timeline{padding-left:34px}.rank-level{left:-76px}}
@media(prefers-reduced-motion:reduce){.way{transition:none}}


/* Seamless breathing: the original poster and silhouette stay fixed.
   Only a feathered internal texture patch animates; no loose image cutouts. */
.poster-art{display:block;width:100%;height:auto}
.ninja-living-layer{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
  user-select:none;
  display:block;
  contain:paint;
}
@media(max-width:820px), (prefers-reduced-motion:reduce){
  .ninja-living-layer{display:none}
}


/* Final panoramic hero: ONE painted image across the full first screen.
   No CSS mirrored scenery, blur strips, gutters, or separate side images.
   All interactive hitboxes are positioned relative to the original poster
   area embedded in the completed 1935 × 941 panoramic artwork. */
.hero-stage{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  background:#090708;
}
.hero-stage::before,.hero-stage::after{display:none!important;content:none!important}
.hero-stage .poster{
  position:relative;
  flex:1 0 100%;
  width:100%;
  max-width:100%;
  height:100vh;
  height:100svh;
  aspect-ratio:auto;
  margin:0;
  container-type:inline-size;
  overflow:hidden;
}
.hero-stage .poster-art,.hero-stage .poster-image{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:fill;
}
.hero-original-frame{
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:6.7958656331%;
  width:86.4082687339%;
  height:100%;
  pointer-events:none;
}
.hero-original-frame .down-hotspot,
.hero-original-frame .notice{pointer-events:auto}
.hero-stage .overlay-input{font-size:clamp(10px,.98cqw,17px)}
@media(max-width:820px){
  .hero-stage{min-height:0;display:block;overflow:visible}
  .hero-stage .poster{flex:0 0 auto;width:100%;height:auto;aspect-ratio:1935 / 941;overflow:visible}
  .hero-stage .poster-art,.hero-stage .poster-image{
    position:static;
    top:auto;
    left:auto;
    width:100%;
    height:auto;
    transform:none;
    max-width:100%;
    object-fit:contain;
  }
  .hero-original-frame{display:none}
}


/* Native fallback for anchor links if the tiny scroll helper is unavailable. */
@media(prefers-reduced-motion:no-preference){
  html:not(.lenis){scroll-behavior:smooth;scroll-padding-top:78px}
}

/* Access to the separate external character-creation preview. */
.notice .character-preview-link{display:block;font:700 11px/1.6 'Cinzel',Georgia,serif;letter-spacing:.035em;margin-top:9px;color:#ebba90;text-decoration:none}
.notice .character-preview-link:hover{text-decoration:underline}
.character-cta-link{display:block;width:fit-content;margin:22px auto 0;padding:12px 8px;color:#e4b08f;text-decoration:none;font:700 12px 'Cinzel',Georgia,serif;letter-spacing:.12em;border-bottom:1px solid #883f32;transition:color .2s}
.character-cta-link:hover{color:#ffcfaa}
.character-cta-link span{margin-left:12px}

/* Dedicated navigation into the two honest preview journeys. */
.notice .character-flow-links{display:flex;flex-direction:column;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid #57342c}
.notice .character-flow-links .character-preview-link{display:block;margin:0;padding:5px 0;font:700 clamp(9px,.76vw,12px)/1.4 'Cinzel',Georgia,serif;color:#efb18b;text-decoration:none}
.notice .character-flow-links a:hover{text-decoration:underline}
.mobile-flow-preview{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}
.mobile-flow-preview a{padding:11px 12px;border:1px solid #6d342d;text-decoration:none;text-align:center;background:#241315;color:#ecc3a5;font:700 11px 'Cinzel',Georgia,serif;letter-spacing:.04em}
.mobile-flow-preview a:hover{border-color:#d4664a;background:#4a2222}

/* Additional community destinations, preserving the existing landing layout. */
@media(max-width:1240px){.chapter-nav{gap:clamp(9px,1.8vw,22px)}.chapter-nav a{font-size:10px;letter-spacing:.07em}.chapter-nav a>span{font-size:16px;margin-right:4px}}
@media(max-width:820px){.chapter-nav{flex-wrap:wrap;column-gap:14px;row-gap:8px;padding:11px 14px}.chapter-nav a{font-size:10px}.chapter-nav a.nav-play{padding:8px 10px}}