/* ===== TOKENS ===== */
:root{
  --bg: #0a0d13;
  --bg-soft: #10141d;
  --panel: #141924;
  --panel-line: rgba(255,255,255,0.08);
  --text: #f2f4f8;
  --text-dim: #8b93a6;
  --amber: #ffc93c;
  --green: #37e08c;
  --red: #ff4d5e;
  --amber-glow: rgba(255,201,60,0.35);
  --green-glow: rgba(55,224,140,0.3);
  --font-display: 'Sora', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 20px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.5;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
::selection{ background: var(--amber); color:#0a0d13; }

.accent{ color: var(--amber); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* reveal on scroll */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-display);
  font-weight:700;
  font-size:0.82rem;
  letter-spacing:0.08em;
  padding: 15px 30px;
  border-radius: 100px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn--primary{
  background: linear-gradient(135deg, var(--amber), #ffdf85);
  color: #10141d;
  box-shadow: 0 0 0 rgba(255,201,60,0);
}
.btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 12px 30px var(--amber-glow); }
.btn--ghost{
  border: 1px solid var(--panel-line);
  color: var(--text);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{ border-color: var(--amber); color: var(--amber); transform: translateY(-3px); }
.btn--lg{ padding: 20px 44px; font-size: 0.92rem; }
.btn--nav{
  padding: 12px 36px;
  font-size:0.72rem;
  color: var(--text);
  background: rgba(10,13,19,0.32);
  border: 1px solid var(--green);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(55,224,140,0.08);
}
.btn--nav:hover{
  color: #07110d;
  background: var(--green);
  box-shadow: 0 0 24px var(--green-glow);
}
.btn--pick{
  margin-top: 18px;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* ===== ROAD SPINE (signature element) ===== */
.road-spine{
  position: fixed;
  top: 0; left: 10px;
  width: 4px;
  height: 100vh;
  z-index: 40;
  pointer-events: none;
}
.road-spine__track{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom, var(--panel-line) 0 10px, transparent 10px 22px
  );
}
.road-spine__dot{
  position:absolute; left:50%;
  top:0;
  width: 12px; height:12px;
  transform: translate(-50%, -50%);
  border-radius:50%;
  background: var(--amber);
  box-shadow: 0 0 16px 4px var(--amber-glow);
  transition: top .1s linear;
}
@media (max-width: 900px){ .road-spine{ display:none; } }

/* ===== NAVBAR ===== */
.navbar{
  position: fixed; top:0; left:0; right:0;
  z-index: 50;
  padding: 22px 5vw;
  transition: padding .35s var(--ease), background .35s var(--ease), backdrop-filter .35s var(--ease), box-shadow .35s var(--ease);
}
.navbar.scrolled{
  padding: 12px 5vw;
  background: rgba(10,13,19,0.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--panel-line);
}
.navbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width: 1400px; margin: 0 auto;
}
.navbar__logo{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.navbar__logo span{ color: var(--amber); }
.navbar__links{
  display:flex; gap: 38px;
  font-size: 0.85rem;
  font-weight: 600;
}
.navbar__links a{
  position:relative;
  color: var(--text-dim);
  transition: color .25s;
}
.navbar__links a::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:0; height:1px; background:var(--amber);
  transition: width .3s var(--ease);
}
.navbar__links a:hover{ color: var(--text); }
.navbar__links a:hover::after{ width:100%; }
.navbar__burger{ display:none; flex-direction:column; gap:5px; }
.navbar__burger span{ width:22px; height:2px; background:var(--text); }
.navbar__mobile{
  display:none;
  flex-direction:column;
  gap: 20px;
  padding: 24px 0 8px;
  font-weight:600;
}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 140px 5vw 60px;
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__gridline{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--panel-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--panel-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent 90%);
  opacity: 0.5;
}
.hero__glow{
  position:absolute; width:50vw; height:50vw; border-radius:50%;
  filter: blur(90px); opacity:0.35;
}
.hero__glow--amber{ background:var(--amber); top:-15%; left:-10%; }
.hero__glow--green{ background:var(--green); bottom:-25%; right:-10%; }
.hero__road{
  position:absolute; bottom:0; left:0; right:0; height:38%;
  background: linear-gradient(to top, #05060a, transparent);
}
.hero__lane{
  position:absolute; bottom: 12%; left:0; right:0; height:3px;
  background: repeating-linear-gradient(to right, var(--text-dim) 0 40px, transparent 40px 80px);
  opacity:0.25;
}
.hero__lane:nth-child(2){ bottom: 4%; opacity:0.15; }

.hero__content{ position:relative; z-index:2; max-width: 760px; }
.hero__eyebrow{ display:flex; align-items:center; gap:10px; }
.hero__eyebrow::before{
  content:''; width:8px; height:8px; border-radius:50%;
  background: var(--green); box-shadow:0 0 10px var(--green-glow);
}
.hero__headline{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 10px 0 26px;
}
.hero__headline .line{ display:block; }
.hero__headline .line--accent{ color: var(--amber); text-shadow: 0 0 40px var(--amber-glow); }
.hero__sub{
  font-size: 1.08rem;
  color: var(--text-dim);
  max-width: 480px;
  margin-bottom: 40px;
}
.hero__cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero__progress{ display:flex; align-items:center; gap:14px; max-width:340px; }
.hero__progress-label{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.15em; color:var(--text-dim); white-space:nowrap; }
.hero__progress-bar{ flex:1; height:2px; background:var(--panel-line); position:relative; overflow:hidden; }
.hero__progress-fill{ position:absolute; left:0; top:0; bottom:0; width:8%; background:var(--amber); animation: fillPulse 3s ease-in-out infinite; }
@keyframes fillPulse{ 0%,100%{ width:8%; } 50%{ width:14%; } }

.hero__stage{
  position:absolute; right: clamp(32px, 5vw, 88px); bottom: clamp(26px, 4vh, 48px); top:92px;
  z-index:1;
  display:flex; align-items:flex-end; justify-content:flex-end; gap: clamp(8px, 1.2vw, 20px);
  width: min(54vw, 920px);
  --hero-sign-offset: clamp(-72px, -4vw, -44px);
  pointer-events:none;
}
.hero__figure{ position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero__figure--raka{ animation: floatY 5s ease-in-out infinite; margin-bottom: 0; margin-right: clamp(-180px, -10vw, -120px); }
.hero__figure--nara{ animation: floatY 5.6s ease-in-out infinite 0.4s; margin-bottom: 0; }
@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }
.hero__figure-tag{
  font-family: var(--font-mono); font-size:0.68rem; letter-spacing:0.2em;
  color: var(--text-dim); background: rgba(255,255,255,0.05);
  border:1px solid var(--panel-line); padding:4px 12px; border-radius:100px;
}

.hero__sign{ position:absolute; z-index:2; }
.hero__sign--stop,
.hero__sign--go{
  top: clamp(28px, 6vh, 58px);
  width:56px; height:56px; border-radius:50%;
  color:#fff;
  font-family: var(--font-mono); font-size:0.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border: 3px solid #fff2;
  opacity:0.85;
}
.hero__sign--stop{
  right: calc(var(--hero-sign-offset) + 72px);
  background: var(--red);
  box-shadow: 0 0 22px rgba(255,77,94,0.18);
  animation: floatY 6s ease-in-out infinite 1s;
}
.hero__sign--go{
  right: var(--hero-sign-offset);
  background: var(--green);
  color:#07110d;
  box-shadow: 0 0 24px var(--green-glow);
  animation: floatY 6.4s ease-in-out infinite 1.25s;
}
.hero__sign--light{
  bottom: 6%; left: -14%;
  display:flex; flex-direction:column; gap:6px;
  background: var(--panel); padding:8px; border-radius:10px;
  border:1px solid var(--panel-line);
  animation: floatY 7s ease-in-out infinite 0.6s;
}
.light{ width:12px; height:12px; border-radius:50%; opacity:0.25; }
.light--red{ background:var(--red); }
.light--amber{ background:var(--amber); }
.light--green{ background:var(--green); animation: lightOn 4.5s steps(1) infinite; }
@keyframes lightOn{
  0%,60%{ opacity:0.25; }
  70%,100%{ opacity:1; box-shadow:0 0 14px var(--green-glow); }
}

/* character figures (CSS-built, elegant placeholder) */
.figure{ position:relative; width:120px; height:190px; }
.figure--lg{ width:170px; height:260px; }
.figure__head{
  position:absolute; top:26px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%;
  background: #e8b98e;
}
.figure--lg .figure__head{ width:60px; height:60px; top:36px; }
.figure__helmet{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:56px; height:34px; border-radius: 30px 30px 0 0;
}
.figure--lg .figure__helmet{ width:76px; height:46px; top:16px; }
.figure--raka .figure__helmet{ background: linear-gradient(135deg, var(--amber), #e6a91f); }
.figure--nara .figure__helmet{ background: linear-gradient(135deg, var(--green), #1fae66); }
.figure__body{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:76px; height:110px; border-radius: 30px 30px 14px 14px;
}
.figure--lg .figure__body{ width:104px; height:150px; }
.figure--raka .figure__body{ background: linear-gradient(180deg, #1c2434, #0f141e); border:1px solid rgba(255,201,60,0.35); }
.figure--nara .figure__body{ background: linear-gradient(180deg, #1c2434, #0f141e); border:1px solid rgba(55,224,140,0.35); }
.figure__glow{
  position:absolute; bottom:-10%; left:50%; transform:translateX(-50%);
  width:90%; height:24px; border-radius:50%;
  background: var(--amber-glow); filter: blur(18px);
}
.figure--nara .figure__glow{ background: var(--green-glow); }

.hero__scroll-hint{
  position:absolute; bottom: 34px; left:5vw; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:0.6rem; letter-spacing:0.2em; color:var(--text-dim);
}
.hero__scroll-line{ width:1px; height:38px; background: linear-gradient(var(--amber), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform: scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ===== SECTIONS SHARED ===== */
section{ position:relative; padding: 130px 5vw; max-width: 1400px; margin:0 auto; }

/* ===== JOURNEY ===== */
.journey{ text-align:center; }
.journey .section-title{ margin-bottom:70px; }
.journey__map{ position:relative; }
.journey__path{ position:absolute; top:24px; left:0; right:0; height:120px; z-index:0; }
.journey__path svg{ width:100%; height:100%; }
.journey__path path{
  fill:none; stroke: var(--panel-line); stroke-width:2; stroke-dasharray: 6 10;
}
.journey__stops{
  position:relative; z-index:1;
  display:grid; grid-template-columns: repeat(4,1fr); gap:30px;
}
.stop{ text-align:left; }
.stop__marker{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background: var(--panel); border:1px solid var(--panel-line);
  font-family: var(--font-mono); font-weight:600; color:var(--amber);
  margin-bottom: 18px;
}
.stop h3{ font-family:var(--font-display); font-size:1.15rem; letter-spacing:0.02em; margin-bottom:8px; }
.stop p{ color: var(--text-dim); font-size:0.92rem; }

/* ===== CHARACTER ===== */
.character{ text-align:center; }
.character .section-title{ margin-bottom: 60px; }
.character__grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px;
}
.char-card{
  position:relative;
  background: var(--panel);
  border:1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 46px 34px;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
  cursor:pointer;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.char-card__glow{
  position:absolute; width:280px; height:280px; border-radius:50%;
  filter: blur(70px); opacity:0; transition: opacity .5s;
  top:-30%; left:50%; transform:translateX(-50%);
}
.char-card--raka .char-card__glow{ background: var(--amber); }
.char-card--nara .char-card__glow{ background: var(--green); }
.char-card:hover, .char-card:focus{
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.char-card--raka:hover{ border-color: rgba(255,201,60,0.5); }
.char-card--nara:hover{ border-color: rgba(55,224,140,0.5); }
.char-card:hover .char-card__glow{ opacity:0.4; }
.char-card:hover .figure{ transform: translateY(-10px) rotate(-2deg); }
.char-card--nara:hover .figure{ transform: translateY(-10px) rotate(2deg); }
.char-card:hover .btn--pick{ opacity:1; transform: translateX(0); }
.char-card__figure{ position:relative; z-index:1; margin-bottom:30px; }
.char-card__figure .figure{ transition: transform .4s var(--ease); }
.char-card__info h3{ font-family:var(--font-display); font-size:1.8rem; font-weight:800; letter-spacing:0.03em; }
.char-card__tag{ color:var(--text-dim); margin-top:6px; font-style:italic; }

/* ===== LEARN ===== */
.learn__header{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom: 50px; flex-wrap:wrap; gap:20px;
}
.learn__progress{ text-align:right; }
.learn__progress span#chapCount{
  display:block; font-family:var(--font-mono); font-size:1.6rem; color:var(--amber); font-weight:600;
}
.learn__progress-label{ font-family: var(--font-mono); font-size:0.65rem; letter-spacing:0.2em; color:var(--text-dim); }
.learn__rail{
  display:grid; grid-template-columns: repeat(5, minmax(220px,1fr));
  gap: 20px;
  overflow-x:auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
}
.chapter-card{
  scroll-snap-align:start;
  background: linear-gradient(160deg, var(--panel), #0d1119);
  border:1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 30px 24px;
  min-height: 260px;
  display:flex; flex-direction:column;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.chapter-card:hover{ transform: translateY(-8px); border-color: rgba(255,201,60,0.4); }
.chapter-card__num{
  font-family: var(--font-mono); font-size:2rem; font-weight:600;
  color: var(--panel-line); -webkit-text-stroke: 1px rgba(255,201,60,0.4); color:transparent;
  margin-bottom:18px;
}
.chapter-card h3{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:12px; }
.chapter-card p{ color:var(--text-dim); font-size:0.88rem; flex:1; }
.chapter-card__level{
  margin-top:18px; align-self:flex-start;
  font-family: var(--font-mono); font-size:0.65rem; letter-spacing:0.15em;
  color: var(--amber); border:1px solid rgba(255,201,60,0.3); padding:5px 12px; border-radius:100px;
}

/* ===== GAMES ===== */
.games{ text-align:center; }
.games__bg{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(255,201,60,0.08), transparent 70%);
}
.games__sub{ color:var(--text-dim); max-width:520px; margin: 20px auto 60px; }
.games__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:22px;
  text-align:left; margin-bottom: 56px;
}
.game-card{
  background: var(--panel); border:1px solid var(--panel-line);
  border-radius: var(--radius); padding:30px 24px;
  transition: transform .35s var(--ease), border-color .35s;
  position:relative; overflow:hidden;
}
.game-card:hover{ transform: translateY(-8px); border-color: rgba(255,201,60,0.4); }
.game-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px;
  background: rgba(255,201,60,0.1); color:var(--amber);
  font-size:1.2rem; margin-bottom:20px;
}
.game-card h3{ font-family:var(--font-display); font-size:1.1rem; margin-bottom:10px; }
.game-card p{ color:var(--text-dim); font-size:0.86rem; margin-bottom:22px; }
.game-card__badge{
  font-family: var(--font-mono); font-size:0.62rem; letter-spacing:0.15em;
  color: var(--bg); background: var(--amber); padding:6px 12px; border-radius:100px;
}
.game-card--future{ border-style:dashed; }
.game-card--future .game-card__icon{ background: rgba(55,224,140,0.1); color:var(--green); }
.game-card__badge--future{ background:transparent; border:1px solid var(--green); color:var(--green); }

/* ===== COMPANION ===== */
.companion__inner{
  display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items:center;
}
.companion__mascot{ display:flex; justify-content:center; align-items:center; }
.mascot-img{
  max-width: 260px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(255,201,60,0.25));
  animation: floatY 5s ease-in-out infinite;
}
.chat-preview{ margin: 26px 0 32px; display:flex; flex-direction:column; gap:12px; max-width:440px; }
.chat-bubble{ padding: 14px 20px; border-radius:16px; font-size:0.92rem; }
.chat-bubble--user{ align-self:flex-end; background: var(--panel); border:1px solid var(--panel-line); }
.chat-bubble--ai{ align-self:flex-start; background: linear-gradient(135deg, rgba(255,201,60,0.14), rgba(55,224,140,0.1)); border:1px solid rgba(255,201,60,0.25); }

/* ===== REPORT ===== */
.report__grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.report__desc{ color:var(--text-dim); margin-top:18px; max-width:420px; }
.map{
  position:relative; aspect-ratio: 4/3; border-radius: var(--radius);
  background: var(--panel); border:1px solid var(--panel-line); overflow:hidden;
}
.map__grid{
  position:absolute; inset:0;
  background-image: linear-gradient(var(--panel-line) 1px, transparent 1px), linear-gradient(90deg, var(--panel-line) 1px, transparent 1px);
  background-size: 36px 36px;
}
.map__pin{
  position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0;
  background: var(--red); transform: rotate(-45deg);
}
.map__pin span{ position:absolute; inset:3px; border-radius:50%; background:#fff2; }
.map__pin--1{ top:30%; left:22%; }
.map__pin--2{ top:55%; left:60%; background: var(--amber); }
.map__pin--3{ top:70%; left:34%; background: var(--green); }
.map__pin--1::before, .map__pin--2::before, .map__pin--3::before{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border: 2px solid currentColor; opacity:0.4; animation: ping 2.4s infinite;
}
.map__pin--1{ color:var(--red); }
.map__pin--2{ color:var(--amber); }
.map__pin--3{ color:var(--green); }
@keyframes ping{ 0%{ transform:scale(0.6); opacity:0.6;} 100%{ transform:scale(1.8); opacity:0;} }
.map__card{
  position:absolute; bottom:16px; left:16px; right:16px;
  background: rgba(10,13,19,0.85); backdrop-filter: blur(10px);
  border:1px solid var(--panel-line); border-radius:14px; padding:14px 18px;
}
.map__live{ font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.15em; color:var(--red); }
.map__card p{ margin-top:6px; font-size:0.88rem; }

/* ===== FINAL ===== */
.final{ text-align:center; padding: 160px 5vw; }
.final__glow{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,201,60,0.12), transparent 70%);
}
.final__headline{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height:1.02;
  margin: 14px 0 22px;
}
.final__sub{ color:var(--text-dim); font-size:1.1rem; margin-bottom:40px; }
.final__quote{
  margin-top: 46px; font-style:italic; color:var(--text-dim);
  max-width: 520px; margin-left:auto; margin-right:auto; font-size:0.95rem;
}

/* ===== FOOTER ===== */
.footer{
  text-align:center; padding: 60px 5vw 40px;
  border-top: 1px solid var(--panel-line);
  color: var(--text-dim); font-size:0.85rem;
}
.footer .navbar__logo{ display:inline-block; margin-bottom:14px; }
.footer__author{ margin-top:6px; opacity:0.6; font-size:0.78rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
  .character__grid{ grid-template-columns:1fr; }
  .games__grid{ grid-template-columns: 1fr 1fr; }
  .companion__inner, .report__grid{ grid-template-columns:1fr; }
  .companion__mascot{ order:-1; }
  .journey__stops{ grid-template-columns: 1fr 1fr; }
  .journey__path{ display:none; }
}

@media (max-width: 760px){
  .navbar__links{ display:none; }
  .navbar .btn--nav{ display:none; }
  .navbar__burger{ display:flex; }
  .navbar__mobile.open{ display:flex; }
  .navbar__mobile .btn--nav{ display:inline-flex; width:fit-content; }

  .hero{ padding-top:120px; min-height:auto; }
  .hero__stage{ position:relative; top:auto; right:auto; bottom:auto; width:100%; margin-top:60px; justify-content:center; }
  .hero__sign{ display:none; }
  .hero__scroll-hint{ display:none; }

  section{ padding: 90px 6vw; }
  .journey__stops{ grid-template-columns:1fr; gap:26px; }
  .learn__rail{ grid-auto-columns: 78%; grid-template-columns:none; grid-auto-flow:column; }
  .games__grid{ grid-template-columns:1fr; }
}

/* ===== CHARACTER IMAGES (PNG assets) ===== */
.figure-img{
  width: 160px;
  filter: drop-shadow(0 20px 30px rgba(255,201,60,0.25));
  transition: transform .4s var(--ease);
}
.hero__figure .figure-img{
  width: auto;
  height: clamp(520px, 70vh, 690px);
  max-width: none;
}
.figure-img--lg{ width: 220px; }
.char-card:hover .figure-img{ transform: translateY(-10px) scale(1.03); }
.hero__figure--nara .figure-img{ filter: drop-shadow(0 20px 30px rgba(55,224,140,0.25)); }

@media (max-width: 760px){
  .figure-img{ width: 130px; }
  .hero__figure--raka{ margin-right: 0; }
  .hero__figure .figure-img{
    width: min(38vw, 190px);
    height: auto;
    max-width: 100%;
  }
  .figure-img--lg{ width: 180px; }
  .mascot-img{ max-width: 180px; }
}