@font-face{font-family:Lato;src:url('assets/lato-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url('assets/lato-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Lato;src:url('assets/lato-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/nunito.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Open Sans';src:url('assets/open-sans.woff2') format('woff2');font-weight:400;font-display:swap}

* { box-sizing:border-box }
html { height:100%; scroll-behavior:smooth; scroll-padding-top:75px; background:#222121 }
body { margin:0; color:#626262; font:16px/24px Lato,Arial,sans-serif; background:#f8e1b7 url('assets/parchment.webp') repeat; background-position:0 246px }
button,input { font:inherit }
a { color:#da4444; text-decoration:none }
a:hover { text-decoration:underline }
button { cursor:pointer }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #3a96b8; outline-offset:4px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.skip-link { position:fixed; top:-50px; left:15px; z-index:100; padding:10px; background:#fff }
.skip-link:focus { top:10px }

.navigation { position:fixed; top:0; left:0; right:0; z-index:10; height:55px; border-top:3px solid #f3c800; background:rgba(0,0,0,.8) }
.nav-inner { width:max-content; max-width:100%; height:52px; display:flex; align-items:center; margin:auto; padding-left:43px }
.brand { display:flex; align-items:center; flex-shrink:0; margin-right:25px; padding-top:4px }
.brand img { width:213px; height:20px; display:block }
#main-nav { display:flex; align-items:center; gap:17px; padding-right:17px }
#main-nav>a { padding:14px 12px; font-size:13px; font-weight:700; color:#fff; text-transform:uppercase; line-height:24px; white-space:nowrap }
#main-nav>a:hover { color:#333; background:#f3c800; text-decoration:none }
.search { position:relative; display:flex; align-items:flex-start; border:2px solid #f3c800; border-radius:7px; width:133px; height:29px; flex-shrink:0 }
.search input { background:none; border:0; color:#fff; font:12px 'Open Sans',Arial,sans-serif; min-width:0; width:95px; height:28px; padding:8px 5px 8px 15px; outline:none }
.search input::placeholder { color:#fff }
.search input::-webkit-search-cancel-button { display:none }
.search button { height:26px; width:34px; background:url('assets/search.webp') no-repeat right center; border:0; padding:0 }
.search-result { position:absolute; right:0; top:38px; background:#292b25; color:#fff; box-shadow:0 4px 16px #0004; border:1px solid #e6cb43; border-radius:4px; padding:12px; width:280px; font-size:14px }
.menu-toggle { display:none }

.hero { height:246px; background:#4c7956 url('assets/banner.webp') center center/cover no-repeat; position:relative }
.promotions { position:absolute; right:80px; top:80px; display:flex; gap:16px }
.promotions a { display:block; border:2px outset #f3c800; height:143px; width:254px }
.promotions a:hover { filter:brightness(1.08) }
.promotions img { display:block; width:250px; height:139px; object-fit:cover }

main { width:calc(100% - 384px); min-width:960px; margin-left:187px; padding:115px 0 45px }
h1 { width:960px; max-width:100%; font:700 32px/37px Nunito,Arial,sans-serif; color:#3b3b3b; text-align:center; padding:0 0 14px; margin:0 auto }
h2 { font-size:16px; line-height:24px; margin:0; font-weight:700 }
.overview { display:grid; grid-template-columns:465px 465px; gap:30px; width:960px; max-width:100%; margin:auto }
.map { margin:0; padding-top:10px }
.zoom-image { border:0; background:none; padding:0; display:block; line-height:0; max-width:100%; cursor:zoom-in }
.map .zoom-image { margin:0 auto 16px }
.map img { display:block; width:449px; max-width:100%; height:auto; border:1px solid rgba(0,0,0,.13); padding:1px }
.map figcaption { font-style:italic; padding:8px 0; line-height:24px }
.details { padding-top:8px }
.requirements h2,.prerequisite-link { color:#fd0000; font-weight:700 }
ul { margin:0; padding-left:0; list-style-position:outside }
li { margin-left:0; padding-left:15px }
.requirements ul { margin:0; padding-left:0 }
.requirements li { padding-left:15px; margin-left:0 }
.official-link { overflow-wrap:anywhere }
.position { margin:43px 0 24px }
.position strong { color:#3a96b8 }
.coordinate { border:0; padding:0; background:none; color:inherit }
.coordinate:hover { text-decoration:underline }
.rewards h2 { color:#5fa233 }
.rewards ul { margin-top:8px; padding-left:48px }
.rewards li { padding-left:15px; line-height:24px; margin-bottom:3px }
.walkthrough { padding-top:30px }
.walkthrough p { margin:0; padding:8px 0; line-height:24px }
.walkthrough-image { margin-top:16px; width:100% }
.walkthrough-image img { width:100%; height:auto; display:block }
.walkthrough p.completion { color:#da4444; margin:36px 2px 0; padding:8px 0 }
.comments { margin:113px 2px 0 }
.comments h2 { font:700 24px/36px Nunito,sans-serif; text-align:center; color:#3b3b3b; padding:10px 15px; border-top:2px solid; border-bottom:2px solid }
.comments h2::before,.comments h2::after { display:inline-block; vertical-align:middle }
.comments h2::before { content:url('assets/comment-left.webp'); margin-right:8px }
.comments h2::after { content:url('assets/comment-right.webp'); margin-left:8px }
.bottom-nav { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:35px 2px 0 }
.bottom-nav a { justify-self:center; display:block; padding:0 15px; height:40px; border-radius:20px; background:#dfded9; color:#333; font-size:14px; line-height:40px }
.bottom-nav a:hover { background:#d1d0ca; text-decoration:none }
footer { height:55px; background:#222121 }
.back-to-top { position:fixed; left:0; bottom:0; padding:16px; z-index:5 }
.back-to-top:hover { transform:rotate(360deg); transition:transform .3s }
dialog { position:fixed; max-width:94vw; max-height:92vh; padding:0; border:0; background:#171916; border-radius:3px; overflow:visible }
dialog::backdrop { background:#000c }
dialog>img { display:block; max-width:90vw; max-height:86vh; object-fit:contain }
.close-dialog { position:absolute; right:-12px; top:-15px; border:1px solid #ccb865; border-radius:50%; width:34px; height:34px; color:#fff; background:#292b25; font-size:25px; line-height:25px }
.toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); padding:10px 20px; background:#30392b; color:#fff; border-radius:4px; z-index:30 }
.search-highlight { animation:highlight 2s ease-out }
@keyframes highlight { 0%,40% { background:#ffe78e } 100% { background:transparent } }

@media (min-width:1164px) and (max-width:1344px) {
  main { width:960px; margin-left:calc(100% - 1157px) }
}
@media (max-width:1163px) {
  main { min-width:0; width:calc(100% - 80px); margin:auto }
  .overview { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .nav-inner { padding-left:0 }
  #main-nav { gap:7px; padding-right:12px }
  .brand { margin-right:12px }
  .promotions { right:30px; gap:12px }
  .promotions a { width:224px; height:auto }
  .promotions img { width:220px; height:auto }
}
@media (max-width:850px) {
  .brand img { width:190px; height:auto }
  .nav-inner { padding:0 20px }
  #main-nav { gap:0; padding-right:10px }
  #main-nav>a { font-size:12px; padding:14px 8px }
  body { background-position:0 250px }
  .hero { height:250px }
  .promotions { left:25px; right:25px; top:100px; justify-content:flex-end }
  .promotions a { width:30%; max-width:224px }
  .promotions img { width:100%; height:auto }
  .search { width:115px }
  .search input { width:77px; padding-left:8px }
  main { padding-top:65px; width:calc(100% - 50px) }
  h1 { font-size:29px }
  .overview { gap:26px }
  .position { margin-top:25px }
  .requirements li { margin-left:8px; padding-left:3px }
  .rewards ul { padding-left:22px }
  .rewards li { padding-left:3px }
  .comments { margin-top:70px }
}
@media (max-width:650px) {
  .navigation { height:62px }
  .nav-inner { width:100%; height:59px; justify-content:space-between; padding:0 18px; gap:12px }
  .brand { margin:0 }
  .brand img { width:185px; height:auto }
  .search { width:112px; margin:0 }
  .search input { width:74px }
  .menu-toggle { display:flex; flex-direction:column; gap:4px; background:none; border:0; padding:8px; order:3 }
  .menu-toggle span { width:20px; height:2px; background:#f3c800 }
  .navigation #main-nav { display:none; position:absolute; left:0; top:59px; width:100%; background:#20261ff5; padding:8px 20px; gap:0; flex-direction:column; align-items:stretch }
  .navigation #main-nav.open { display:flex }
  #main-nav>a { line-height:42px; padding:0 10px; border-bottom:1px solid #ffffff15 }
  body { background-position:0 255px }
  .hero { height:255px; background-position:33% center }
  .promotions { top:137px; left:14px; right:14px; gap:8px }
  .promotions a { width:calc((100% - 16px)/3); height:auto; border-width:1px }
  .promotions img { width:100%; height:auto; aspect-ratio:250/139 }
  main { width:calc(100% - 36px); padding-top:48px; padding-bottom:35px }
  h1 { font-size:25px; line-height:31px; padding-bottom:26px }
  .overview { display:flex; flex-direction:column; gap:20px }
  .map { max-width:449px; margin:auto; width:100%; padding-top:0 }
  .map img { width:100% }
  .map .zoom-image { margin-bottom:8px }
  .map figcaption { font-size:14px }
  .details { padding-top:0 }
  .requirements ul { padding-left:20px }
  .requirements li { margin-left:0; padding-left:4px }
  .position { margin:28px 0 24px }
  .rewards ul { padding-left:25px }
  .walkthrough { padding-top:30px }
  .walkthrough p { padding:8px 0 }
  .comments { margin-top:65px }
  .comments h2 { font-size:22px; padding:10px 0 }
  .comments h2::before,.comments h2::after { content:''; width:40px; height:30px; background:center/contain no-repeat; vertical-align:middle }
  .comments h2::before { background-image:url('assets/comment-left.webp') }
  .comments h2::after { background-image:url('assets/comment-right.webp') }
  .back-to-top { left:0; bottom:4px; padding:8px }
  .search-result { right:-40px }
  .bottom-nav { gap:15px; margin-top:28px }
}
@media (max-width:370px) {
  .nav-inner { gap:8px; padding:0 12px }
  .brand img { width:160px }
  .search { width:100px }
  .search input { width:62px; padding-left:6px; font-size:11px }
  .menu-toggle { padding:6px }
}
@media (prefers-reduced-motion:reduce) {
  html { height:100%; scroll-behavior:auto }
  * { animation:none!important; transition:none!important }
}