*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f9fa;color:#526479}.kicker{display:block;color:#8298b8;font-family:Georgia,"Times New Roman",serif;font-size:10px;letter-spacing:5px}.gold-line{display:block;width:62px;height:1px;margin:25px 0 27px;background:linear-gradient(90deg,#c79b55,rgba(199,155,85,.08))}

/* HERO — city floats into the page, no image frame */
.hero{position:relative;min-height:830px;padding:72px 0 55px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 76% 44%,rgba(210,225,214,.32),transparent 33%),linear-gradient(120deg,#fffdf9,#f3f7f7 58%,#f6f8f6)}.hero-number{position:absolute;right:5%;top:9%;font:240px/1 Georgia,serif;color:rgba(48,71,105,.035)}.hero-inner{position:relative;z-index:2;width:88%;max-width:1580px;margin:auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:center}.hero-copy{padding-left:4%}.hero-copy h1{margin:0;color:#304f7d;font-size:68px;font-weight:400;letter-spacing:9px}.hero-copy p{margin:31px 0 0;color:#69788d;font-size:18px;line-height:2.1;letter-spacing:2px}.hero-copy small{display:block;margin-top:42px;color:rgba(78,100,132,.45);font-family:Georgia,"Times New Roman",serif;font-size:9px;letter-spacing:4px}.hero-city{position:relative;margin-right:-3%;background:transparent}.hero-city img{display:block;width:92%;margin-left:auto;mix-blend-mode:multiply;filter:saturate(.94) brightness(1.025);-webkit-mask-image:radial-gradient(ellipse 72% 67% at 50% 49%,#000 65%,rgba(0,0,0,.96) 77%,transparent 100%);mask-image:radial-gradient(ellipse 72% 67% at 50% 49%,#000 65%,rgba(0,0,0,.96) 77%,transparent 100%)}.scroll{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);font:8px Arial;letter-spacing:3px;color:#8190a4;text-align:center}.scroll i{display:block;width:1px;height:34px;margin:8px auto 0;background:linear-gradient(#9ba8b8,transparent)}

.intro{padding:120px 0;background:#fff}.intro-inner{width:84%;max-width:1440px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:110px}.intro h2{margin:22px 0 0;color:#304f7d;font-size:42px;font-weight:400;line-height:1.6;letter-spacing:4px}.intro-copy{padding-top:31px;color:#68768b;font-size:16px;line-height:2.15;letter-spacing:1.4px}.intro-copy p{margin:0 0 20px}

/* Interactive city — deliberately frameless */
.explore{padding:118px 4.5% 130px;background:#f4f7f7}.explore-heading-grid{max-width:1540px;margin:0 auto 62px;display:grid;grid-template-columns:minmax(0,1.68fr) minmax(330px,.52fr);gap:46px}.explore-heading{text-align:center;max-width:820px;width:100%;margin:0 auto;grid-column:1}.explore-heading h2{margin:20px 0 14px;color:#304f7d;font-size:42px;font-weight:400;letter-spacing:4px}.explore-heading p{margin:0;color:#748194;font-size:15px;line-height:2;letter-spacing:1.3px}.city-guide{max-width:1540px;margin:auto;display:grid;grid-template-columns:minmax(0,1.68fr) minmax(330px,.52fr);gap:46px;align-items:stretch}.map-stage{position:relative;min-width:0;align-self:center;background:transparent;overflow:visible}.map-stage>img{display:block;width:100%;height:auto;mix-blend-mode:multiply;filter:saturate(.97) brightness(1.02);-webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,#000 67%,rgba(0,0,0,.94) 80%,transparent 100%);mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,#000 67%,rgba(0,0,0,.94) 80%,transparent 100%)}.hotspots{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hotspots path{fill:rgba(255,246,205,.035);stroke:rgba(188,154,87,.07);stroke-width:3;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .25s,stroke .25s,filter .25s}.hotspots path:hover,.hotspots path.active{fill:rgba(255,238,163,.22);stroke:rgba(190,145,62,.82);filter:drop-shadow(0 0 11px rgba(225,188,105,.62))}.explore-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:11px 20px;border:1px solid rgba(181,143,75,.42);background:rgba(255,255,255,.84);box-shadow:0 8px 28px rgba(58,75,92,.08);color:#536b88;font-size:12px;letter-spacing:2px;pointer-events:none;animation:eryndorHint 3.2s ease forwards;white-space:nowrap}@keyframes eryndorHint{0%,18%{opacity:0}35%,72%{opacity:1}100%{opacity:0;visibility:hidden}}.map-caption{position:absolute;left:7%;bottom:4%;display:flex;gap:14px;align-items:center;color:#9aa4aa;font:10px Georgia,serif;letter-spacing:3px}.map-caption b{font-family:inherit;font-size:11px;font-weight:400;letter-spacing:1px;color:#a1a9ad}.district-panel{position:relative;padding:32px 14px 42px 28px;border-top:1px solid rgba(184,145,78,.75);border-bottom:1px solid rgba(80,99,122,.16);background:rgba(255,255,255,.38);min-height:610px}.panel-en{color:#a27d47;font:11px Georgia,serif;letter-spacing:4px}.district-panel h3{margin:20px 0 16px;color:#365577;font-size:30px;font-weight:400;letter-spacing:3px}.district-panel>p{margin:0;color:#7a899b;font-size:15px;line-height:1.9}.panel-rule{height:1px;background:rgba(80,99,122,.15);margin:27px 0 25px}.service-label{color:#a27d47;font:10px Georgia,serif;letter-spacing:3px}.npc{padding:16px 0;border-bottom:1px solid rgba(80,99,122,.12)}.npc b{display:block;color:#536a83;font-size:15px;font-weight:500}.npc small{display:block;margin-top:6px;color:#8a97a4;font-size:13px;line-height:1.5}#serviceBlock[hidden]{display:none}

.districts{padding:105px 24px;background:#fff}.districts-inner{max-width:1180px;margin:auto;text-align:center}.districts h2{margin:20px 0 55px;color:#304f7d;font-size:38px;font-weight:400;letter-spacing:4px}.district-line{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto;gap:15px;align-items:center;color:#708197;font-size:14px}.district-line i{height:1px;background:linear-gradient(90deg,rgba(159,174,188,.18),rgba(181,143,75,.45),rgba(159,174,188,.18))}

.feature-next{padding:100px 0;background:#fff}.next-inner{width:84%;max-width:1440px;margin:auto}.next-inner>.kicker{text-align:center}.next-links{display:grid;grid-template-columns:1fr 1fr;margin-top:38px;border-top:1px solid rgba(68,84,108,.12);border-bottom:1px solid rgba(68,84,108,.12)}.next-links a{padding:30px 28px;text-decoration:none}.next-links a:first-child{border-right:1px solid rgba(68,84,108,.1)}.next-links small{display:block;color:#aa8651;font:9px Georgia,"Times New Roman",serif;letter-spacing:3px}.next-links b{display:block;margin-top:10px;color:#506681;font-size:17px;font-weight:400;letter-spacing:2px}.next-links .right{text-align:right}.download{padding:105px 24px 110px;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(255,239,205,.5),transparent 34%),linear-gradient(#f6f9fb,#fffdf9)}.download h2{margin:22px 0 34px;color:#304f7d;font-size:38px;font-weight:400;letter-spacing:4px}.download a{display:inline-flex;align-items:center;justify-content:space-between;width:238px;height:58px;padding:0 23px;border:1px solid rgba(165,132,78,.62);background:rgba(255,255,255,.8);color:#405b82;text-decoration:none;font-size:14px;letter-spacing:1.5px}

@media(max-width:1100px){.explore-heading-grid{grid-template-columns:1.5fr .65fr;gap:25px}.hero{min-height:700px}.hero-inner{grid-template-columns:.82fr 1.18fr;gap:30px}.hero-copy h1{font-size:52px}.intro-inner{gap:60px}.city-guide{grid-template-columns:1.5fr .65fr;gap:25px}.district-panel{min-height:520px}}
@media(max-width:768px){.explore-heading-grid{display:block;margin-bottom:45px}.explore-heading{max-width:820px}.explore-hint{font-size:11px;padding:9px 14px}.hero{min-height:auto;padding:110px 0 75px}.hero-number{font-size:150px;top:90px}.hero-inner{width:88%;grid-template-columns:1fr;gap:35px}.hero-copy{padding:0}.hero-copy h1{font-size:43px;letter-spacing:6px}.hero-copy p{font-size:17px}.hero-city{margin:0}.scroll{display:none}.intro{padding:85px 0}.intro-inner{width:86%;grid-template-columns:1fr;gap:25px}.intro h2,.explore-heading h2{font-size:31px}.intro-copy{padding:0;font-size:18px}.explore{padding:85px 16px 95px}.city-guide{grid-template-columns:1fr;gap:30px}.district-panel{min-height:460px;padding-left:22px}.panel-note{left:22px}.map-caption{display:none}.districts{padding:85px 20px}.districts h2{font-size:30px}.district-line{grid-template-columns:1fr 1fr;gap:16px 28px}.district-line i{display:none}.next-links{grid-template-columns:1fr}.next-links a:first-child{border-right:0;border-bottom:1px solid rgba(68,84,108,.1)}.download h2{font-size:30px}}


/* 2026-10 visual consistency: shared Feature hero baseline */
.hero{min-height:100vh;padding:72px 0 0;background:radial-gradient(circle at 18% 20%,rgba(255,239,204,.52),transparent 27%),linear-gradient(120deg,#fffdf9 0%,#f7fafc 48%,#edf4f8 100%)}
.hero-number{left:5.5%;right:auto;top:13%;font:240px/1 Georgia,"Times New Roman",serif;color:rgba(66,91,126,.035);letter-spacing:-12px}
.hero-inner{transform:translateY(-18px)}
.download{padding:105px 24px 110px;background:radial-gradient(circle at 50% 20%,rgba(255,239,205,.5),transparent 34%),linear-gradient(#f6f9fb,#fffdf9)}
.download h2{margin:22px 0 34px;font-size:38px}
@media(max-width:768px){.hero-number{left:5.5%;right:auto;top:90px;font-size:150px}.hero-inner{transform:none}.download h2{font-size:30px}}

/* Compact mini-game list: keep all items visible without extending the panel */
#serviceBlock.compact-list .npc{padding:8px 0}
#serviceBlock.compact-list .npc b{line-height:1.35}


/* 2026-10 city-guide detail polish */
/* Intro: keep the explanatory copy in a readable column instead of stretching across the page. */
.intro-inner{grid-template-columns:.95fr 1.05fr;gap:92px}
.intro-copy{max-width:610px;padding-top:25px;font-size:17px;line-height:2.05;letter-spacing:1.25px}
.intro-copy p{margin:0 0 16px}

/* District descriptions are primary copy, not footnotes. */
.district-panel>p{font-size:17px;line-height:1.95;letter-spacing:.35px}

/* Mini games: relaxed enough to scan, compact enough to stay inside the panel. */
#serviceBlock.compact-list .npc{padding:11px 0}
#serviceBlock.compact-list .npc b{line-height:1.4}

/* Dungeon list: two columns because this district contains many destinations. */
#serviceBlock.dungeon-list #npcList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
#serviceBlock.dungeon-list .npc{padding:9.5px 0}
#serviceBlock.dungeon-list .npc b{line-height:1.35}

@media(max-width:1100px){
  .intro-inner{gap:58px}
  .intro-copy{font-size:16px}
  .district-panel>p{font-size:16px}
  #serviceBlock.dungeon-list #npcList{column-gap:16px}
}
@media(max-width:768px){
  .intro-copy{max-width:none;font-size:17px}
  .district-panel>p{font-size:16px}
  #serviceBlock.dungeon-list #npcList{grid-template-columns:1fr 1fr}
}