/* NosTale Classic main page. Sizes, positions, fonts and text colors follow the 2010 NosTale homepage (a 956px layout:
   189px menu panel, 550px middle column of rows, 189px right panel). The frames and scenery are the 2010 site's images,
   under the same file names in img/; the header is img/header.png. */

:root {
  --sky: #7fdbf2;
  --text: #671000;
  --text-panel: #691e1a;
  --title-text: #fef6aa;
  --title-current: #fffde8;
  --heading: #7b1300;
  --footer-text: #703a00;
  --link: #a10800;
  --wood-dark: #5b3512;
  --wood: #8a5a2b;
  --wood-light: #b07a3c;
  --parchment: #f2dd98;
  --parchment-light: #fbf1c9;
  --parchment-edge: #c9a44c;
  --green-light: #a9dc5c;
  --green: #63ad29;
  --green-dark: #3f8612;
  --green-edge: #2f6a0c;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  font: 13px/14px Arial, Helvetica, sans-serif;
  background: var(--sky);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

[hidden] { display: none !important; }

/* The footer ground reaches past the page edges; they must not make it wider. This is a wrapper and not
   body, because body's overflow would be moved to the window, and phones would still lay the page out wider.
   Behind the columns: container-bg-top under the 345px header, and container-bg repeated all the way down (the header
   covers its top).
   Every screen gets this 956px layout with its 2010 images (user requests 2026-10-01): a narrow desktop window scrolls
   sideways, and phones show the whole page scaled down (the pages' viewport is 956px wide). */
.page {
  min-width: 956px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background:
    url(../img/container-bg-top.jpg) no-repeat 50% 345px,
    url(../img/container-bg.jpg) repeat-y 50% 0;
}

/* ---------- Header: 345px, the header image top-centered, logo 252x149 at the top, download banner 541x120 below ---------- */

.site-header {
  position: relative;
  height: 345px;
  background: var(--sky) url(../img/header.png) no-repeat 50% 0;
}

.header-inner {
  position: relative;
  width: 930px;
  height: 342px;
  margin: 0 auto;
}

.logo {
  position: absolute;
  z-index: 1;
  left: 363px;
  top: 0;
  width: 252px;
  height: 149px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* The logo image (280x178) scaled down to fit the 252x149 box, keeping its proportions. */
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Language switch: the launcher's flags (32x32) at the top right, over the clouds. The page's own language is lit, the
   other one dimmed until it is hovered. */
.language-switch {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 40px;
  display: flex;
  gap: 6px;
}

.language-switch a {
  display: block;
  border-radius: 50%;
  opacity: .6;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.language-switch a:hover,
.language-switch a:focus-visible,
.language-switch a[aria-current] {
  opacity: 1;
}

.language-switch a:focus-visible {
  outline: 2px solid var(--title-text);
  outline-offset: 2px;
}

.language-switch img {
  display: block;
}

/* regBtn.jpg (541x240): the banner on top, the lit one 120px below. */
.download-banner {
  position: absolute;
  z-index: 1;
  left: 193px;
  top: 179px;
  width: 541px;
  height: 120px;
  text-decoration: none;
  background: url(../img/regBtn.jpg) no-repeat 0 0;
}

.download-banner:hover,
.download-banner:focus-visible {
  background-position: 0 -120px;
  text-decoration: none;
}

.download-banner-title {
  display: block;
  height: 95px;
  padding-left: 140px;
  font: bold 26px/95px Arial, Helvetica, sans-serif;
  color: #fff;
  text-shadow: 2px 2px 5px #000;
}

.download-banner-steps {
  display: flex;
  justify-content: center;
  gap: 30px;
  height: 20px;
  font: bold 12px/20px Arial, Helvetica, sans-serif;
  color: #fff;
}

/* ---------- The three columns: left panel at y280, middle at y320, right panel at y281 ---------- */

.layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 956px;
  margin: -65px auto 0;
}

/* The left panel is built from images like in 2010: box-top-1 (143px), modul-box-bg repeated below it, and box-bottom
   (174px, the island) at the bottom. The bottom padding keeps the menu on the parchment, above the island. */
.col-left {
  flex: none;
  width: 189px;
  min-height: 467px;
  padding: 23px 0 139px;
  background:
    url(../img/box-top-1.jpg) no-repeat 0 0,
    url(../img/box-bottom.jpg) no-repeat 0 100%,
    url(../img/modul-box-bg.jpg) repeat-y 0 143px;
}

.col-middle {
  flex: none;
  width: 550px;
  margin: 40px 0 0 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The right panel, also from images: box-top-2 (143px), modul-box-right-bg repeated, box-bottom2 (167px, the tree stump).
   The repeated middle is clipped to the content box, so it stops 57px above the bottom: box-bottom2 is partly
   transparent below that. */
.col-right {
  flex: none;
  width: 189px;
  min-height: 990px;
  margin: 1px 0 0 17px;
  padding: 21px 0 57px;
  background:
    url(../img/box-top-2.jpg) no-repeat 0 0,
    url(../img/box-bottom2.png) no-repeat 0 100%,
    url(../img/modul-box-right-bg.jpg) repeat-y 0 0 content-box;
}

/* ---------- Green buttons: menu entries and the right panel's box titles, 131x34, text 8px from the top ---------- */

.menu {
  position: relative;
  width: 131px;
  margin: 0 0 0 35px;
  padding: 0 0 16px;
  list-style: none;
}

.menu li {
  height: 34px;
}

.menu a,
.side-title {
  position: relative;
  z-index: 0;
  display: block;
  width: 131px;
  height: 34px;
  margin: 0;
  padding: 8px 0 0;
  text-align: center;
  text-decoration: none;
  font: bold 12px/15px Arial, Helvetica, sans-serif;
  color: var(--title-text);
}

/* Menu buttons are main-mav-bg.gif (131x68): the normal button on top, the lit one (hover, current page) 34px below. */
.menu a {
  background: url(../img/main-mav-bg.gif) no-repeat 0 0;
}

.menu a:hover,
.menu a:focus-visible,
.menu a[aria-current="page"] {
  background-position: 0 -34px;
  color: var(--title-current);
}

.menu a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* The right panel's box titles are the top half of main-mav-bg-right.gif (131x68). */
.side-title {
  background: url(../img/main-mav-bg-right.gif) no-repeat 0 0;
}

.side-box {
  width: 132px;
  margin: 0 0 0 23px;
}

/* box-middle.jpg separates a box from a visible box before it: 183x32, from 1px left of the panel. */
.side-box:not([hidden]) ~ .side-box::before {
  content: "";
  display: block;
  width: 183px;
  height: 32px;
  margin-left: -24px;
  background: url(../img/box-middle.jpg) no-repeat;
}

/* ---------- Login and Download boxes: the 2010 form (input-bg-4.gif 129x29 fields; button-bg.gif 129x58, the normal
   button on top and the lit one 29px below) and its download button (download.gif / downloadhover.gif, 132x89) ---------- */

.login-form {
  width: 129px;
  margin: 0;
  padding: 0 0 12px;
}

.login-form label {
  display: block;
  padding: 0 0 0 10px;
  font: 11px/14px Arial, Helvetica, sans-serif;
  color: var(--text-panel);
}

.login-form .input {
  width: 129px;
  height: 29px;
  margin: 2px 0 10px;
  background: url(../img/input-bg-4.gif) no-repeat;
}

.login-form .input input {
  width: 115px;
  height: 15px;
  margin: 7px 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  font: 11px/13px Arial, Helvetica, sans-serif;
  color: var(--text-panel);
}

.login-form .input input:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

.btn {
  display: block;
  width: 129px;
  height: 29px;
  padding: 0;
  border: 0;
  background: url(../img/button-bg.gif) no-repeat 0 0;
  font: bold 12px/28px Arial, Helvetica, sans-serif;
  color: #2b0600;
  text-align: center;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  background-position: 0 -29px;
}

.btn:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* What a box has to say (a refused login, a download that needs a login...). */
.box-note {
  margin: 0 0 10px;
  padding: 0 2px;
  font: bold 12px/15px Arial, Helvetica, sans-serif;
  color: var(--text-panel);
  text-align: center;
  overflow-wrap: anywhere;
}

.box-error {
  color: var(--link);
}

.btn + .box-note,
.btn ~ .box-note {
  margin-top: 8px;
}

/* ---------- Highscore box: the 2010 list (11/14 rows, rank in #b00900, every other row on shadow.gif) ---------- */

.highscore {
  margin: 6px 1px 0 0;
  padding: 0 0 12px;
  list-style: none;
}

.highscore li {
  padding: 2px 0 2px 9px;
  font: 11px/14px Arial, Helvetica, sans-serif;
  color: #4a1e00;
  overflow-wrap: anywhere;
}

.highscore li.light {
  padding: 3px 0 3px 9px;
  background: url(../img/shadow.gif) no-repeat;
}

.highscore strong {
  margin: 0 2px 0 0;
  color: #b00900;
}

.highscore span {
  margin: 0 0 0 2px;
  color: #943b00;
}

/* The lit picture is layered under the normal one, so both are loaded with the page and the first hover doesn't blink. */
.download-button {
  display: block;
  width: 132px;
  height: 89px;
  margin: 4px 0 6px;
  background: url(../img/download.gif) no-repeat, url(../img/downloadhover.gif) no-repeat;
}

.download-button:hover,
.download-button:focus-visible {
  background-image: url(../img/downloadhover.gif), url(../img/downloadhover.gif);
}

.download-button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* The "you need to be logged in" window (js/notices.js): a parchment box with a wooden frame. */
.notice-dialog {
  width: min(320px, calc(100% - 32px));
  margin: auto;
  padding: 22px 20px 18px;
  border: 4px solid var(--wood);
  border-radius: 14px;
  background: linear-gradient(#f4e2a2, #eed68b);
  color: var(--text);
  font: bold 13px/18px Arial, Helvetica, sans-serif;
  text-align: center;
}

.notice-dialog::backdrop {
  background: rgba(0, 0, 0, .55);
}

.notice-dialog p {
  margin: 0 0 16px;
}

.notice-dialog .btn {
  margin: 0 auto;
}

/* The Register button under Login. */
.notice-dialog .btn + .btn {
  margin-top: 8px;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Middle column rows: content-box images with a 42px title (539px, from x11) ---------- */

.row {
  position: relative;
  width: 550px;
  background:
    url(../img/content-box-top.jpg) no-repeat 0 0,
    url(../img/content-box-bottom.jpg) no-repeat 0 100%,
    url(../img/content-box-bg.jpg) repeat-y 0 0;
}

/* The green title bars are part of the box images. */
.row > h2,
.small-box > h2 {
  width: 539px;
  height: 42px;
  margin: 0 0 0 11px;
  padding: 0 0 7px;
  text-align: center;
  font: bold 14px/40px Arial, Helvetica, sans-serif;
  color: var(--title-text);
  scroll-margin-top: 12px;
}

/* Row 1 (at least 237px): the two-boxes images, with two smaller boxes, 246px wide, at x11 and x288. Like in 2010 the row
   grows with a longer box (the Spanish text), keeping 15px below it. */
.row-two {
  display: flex;
  align-items: flex-start;
  min-height: 237px;
  padding-bottom: 15px;
  background:
    url(../img/two-boxes-top.jpg) no-repeat 0 0,
    url(../img/two-boxes-bottom.jpg) no-repeat 0 100%,
    url(../img/two-boxes-bg.jpg) repeat-y 0 0;
}

.small-box {
  flex: none;
  width: 246px;
  min-height: 218px;
  margin-left: 11px;
}

/* The trailer box keeps 2010's 222px: its picture reaches 3px past it, over the row's bottom padding. */
.small-box + .small-box {
  height: 222px;
  margin-left: 31px;
}

.small-box > h2 {
  width: 246px;
  margin: 0;
}

.small-box-body {
  width: 204px;
  margin: 8px 16px 0 26px;
}

/* The trailer link: video.jpg (videohover.jpg on hover) where the 2010 video player was (220x143), in its 1px frame. */
.video-frame {
  display: block;
  width: 220px;
  height: 143px;
  margin: 40px 0 0 18px;
  background: url(../img/video.jpg) 50% 50% / cover no-repeat;
  border: 1px solid #eae0c6;
}

.video-frame:hover,
.video-frame:focus-visible {
  background-image: url(../img/videohover.jpg);
}

/* News and forum rows (231px each). */
.row-news {
  height: 231px;
}

/* The News row's list: the five newest News Blog posts (filled in by DataEditor\Services\NewsBlog.cs), like 2010's Blog
   box: 5px around each post, its "category | author | date | time" line in 10px and its title in bold. */
.news-list {
  width: 539px;
  margin: 0 0 0 11px;
  padding: 0;
  list-style: none;
}

.news-list li {
  margin: 5px;
}

.news-list small {
  font-size: 10px;
}

/* Screenshots row (176px): four 118x97 cells from x36 with screeshot-border-2 frames, pictures 104x78. */
.row-screens {
  height: 176px;
}

.screens {
  display: flex;
  width: 539px;
  margin: 20px 0 0 36px;
  padding: 0 0 17px;
  list-style: none;
}

.screens li {
  width: 118px;
  height: 97px;
  padding-top: 4px;
  background: url(../img/screeshot-border-2.gif) no-repeat;
}

/* Thumbnails (100x75) shown at 104x78 like in 2010; each links to its full-size screenshot. */
.shot {
  display: block;
  width: 104px;
  height: 78px;
  margin: 1px 0 0 10px;
  background: linear-gradient(#e6cd8b, #d9bb72);
}

.shot img {
  display: block;
  width: 104px;
  height: 78px;
}

.shot:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Screenshot viewer (js/gallery.js): the screenshot at full size over a dark, see-through backdrop, with the 2010
   arrowleft/arrowright icons (15x30, shown twice as big) on its sides. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, .8);
}

.lightbox:focus {
  outline: none;
}

/* Full size; only a window smaller than the picture shrinks it. */
.lightbox-image {
  display: block;
  max-width: calc(100vw - 132px);
  max-height: calc(100vh - 32px);
  box-shadow: 0 0 24px #000;
}

.lightbox-prev,
.lightbox-next {
  flex: none;
  width: 48px;
  height: 96px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url(../img/arrowleft.gif) no-repeat 50% 50% / 30px 60px;
}

.lightbox-next {
  background-image: url(../img/arrowright.gif);
}

.lightbox-prev:hover,
.lightbox-next:hover {
  filter: brightness(1.2);
}

.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  outline: 2px solid var(--title-text);
}

/* Long row: a 519px inner area with 507px panels, each with a 27px heading strip. The English page keeps the 2010 page's
   sizes (row 755px, panels 345px and 311px, set at the end of this section); the Spanish texts are shorter, so there the
   row and panels fit their text. */
.inner {
  width: 519px;
  margin: 25px 15px 0 16px;
  padding-bottom: 18px;
}

/* Panels: content-inner-top2 (507x165, with the heading strip and its star), content-inner-bg repeated, and
   content-inner-bottom (16px). */
.panel {
  width: 507px;
  margin: 0 0 14px 5px;
  padding-bottom: 16px;
  background:
    url(../img/content-inner-top2.jpg) no-repeat 0 0,
    url(../img/content-inner-bottom.jpg) no-repeat 0 100%,
    url(../img/content-inner-bg.jpg) repeat-y 0 0;
}

.panel:last-child {
  margin-bottom: 0;
}

html:lang(en) .row-long {
  min-height: 755px;
}

html:lang(en) .row-long .panel:first-child {
  min-height: 345px;
}

html:lang(en) .row-long .panel:last-child {
  min-height: 311px;
}

.panel h3 {
  height: 27px;
  margin: 0;
  padding: 12px 0 0 52px;
  font: bold 13px/15px Arial, Helvetica, sans-serif;
  color: var(--heading);
  scroll-margin-top: 12px;
}

.intro {
  width: 477px;
  margin: 15px;
  text-align: left;
  font: 13px/16px Arial, Helvetica, sans-serif;
  color: var(--text-panel);
}

.intro strong {
  scroll-margin-top: 12px;
}

.bullets,
.bullets ul {
  margin: 0;
  padding: 15px 15px 0;
  list-style: none;
  text-align: left;
  font: 13px/16px Arial, Helvetica, sans-serif;
}

.bullets {
  color: var(--text);
}

.bullets li {
  padding: 0 0 13px 25px;
  color: var(--text-panel);
  background: url(../img/bullet.gif) no-repeat;
}

/* ---------- Footer: footer-bg.gif (250px), starting 152px above the end of the middle column; text 209px down ---------- */

.site-footer {
  position: relative;
  height: 250px;
  margin-top: -152px;
  background: url(../img/footer-bg.gif) no-repeat 50% 0;
}

/* flow-root keeps the list's 194px top margin inside this box instead of moving the whole footer down. */
.footer-inner {
  display: flow-root;
  width: 956px;
  min-height: 238px;
  margin: 0 auto;
}

.footer-links {
  margin: 194px 0 0;
  padding: 15px 10px 0 0;
  list-style: none;
  text-align: center;
  font: 10px/13px Arial, Helvetica, sans-serif;
  color: var(--text);
}

.footer-links li {
  display: inline;
  padding: 0 5px 0 13px;
  color: var(--footer-text);
}

.footer-links li + li {
  background: url(../img/sep.gif) repeat-y 0 7px;
}

/* ---------- Register page (register: parts\register.html in the main page's middle column): the 2009 page's panel
   (www.nostale.co.uk/user/register), measured in the browser. A 290px column on the left (heading, intro, the form with
   lostpassform.gif fields 267x28 every 54px, the T&Cs box, button-bg-2.gif 154x29) and screen-4.jpg on the right at
   12px from the edge; the panel ends with content-inner-bottom2 (30px). Our extra fields keep the same 54px step. ---------- */

.panel-register {
  display: flow-root;
  padding-bottom: 30px;
  background:
    url(../img/content-inner-top2.jpg) no-repeat 0 0,
    url(../img/content-inner-bottom2.jpg) no-repeat 0 100%,
    url(../img/content-inner-bg.jpg) repeat-y 0 0;
}

.register-column {
  float: left;
  width: 290px;
}

.register-intro {
  margin: 15px 15px 0;
  padding: 0 0 0 2px;
  text-align: left;
  font: 13px/16px Arial, Helvetica, sans-serif;
  color: var(--text-panel);
}

.register-note {
  margin: 8px 15px 0;
  text-align: left;
}

.register-form {
  width: 275px;
  margin: 15px 0 0 15px;
}

.register-form > label {
  display: block;
  height: 14px;
  padding: 0 0 0 10px;
  font: 11px/14px Arial, Helvetica, sans-serif;
  color: var(--text-panel);
}

.register-form .input-lost {
  width: 267px;
  height: 38px;
  margin: 2px 0 0;
  padding: 0 0 10px;
  background: url(../img/lostpassform.gif) no-repeat;
}

.register-form .input-lost input {
  width: 254px;
  height: 18px;
  margin: 7px 0 0 6px;
  padding: 1px 2px;
  border: 0;
  background: none;
  font: bold 14px/13px Arial, Helvetica, sans-serif;
  color: var(--text-panel);
}

.register-form .input-lost input:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}

/* The T&Cs box: the checkbox in a 30x25 float, the text (200px) running beside it. */
.agb-form {
  min-height: 41px;
  padding-bottom: 1px;
}

.agb-box {
  float: left;
  width: 30px;
  height: 25px;
}

.agb-box input {
  display: block;
  width: 13px;
  height: 13px;
  margin: 3px 3px 3px 4px;
}

.agb-text {
  display: block;
  width: 200px;
  font: 11px/14px Arial, Helvetica, sans-serif;
  color: var(--text);
  cursor: pointer;
}

/* The Spanish text is longer: a wider line keeps it in two lines like the English one. */
html:lang(es) .agb-text {
  width: 270px;
}

.agb-text strong {
  color: var(--link);
}

.register-mail-note {
  width: 260px;
  margin: 0;
  font: bold 11px/14px Arial, Helvetica, sans-serif;
  color: var(--link);
}

.btn2 {
  display: block;
  width: 154px;
  height: 29px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: url(../img/button-bg-2.gif) no-repeat 0 0;
  font: bold 12px/30px Arial, Helvetica, sans-serif;
  color: #2b0600;
  text-align: center;
  cursor: pointer;
}

.btn2:hover,
.btn2:focus-visible {
  text-decoration: underline;
  background-position: 0 -29px;
}

.btn2:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Account page (partsccount.html): the same panels, full-width text like the 2010 "Your Account" panel (477px). */
.account-text {
  margin: 15px 15px 0;
  padding: 0 0 0 2px;
  text-align: left;
  font: 13px/16px Arial, Helvetica, sans-serif;
  color: var(--text-panel);
}

.panel-register > .register-note {
  margin-right: 15px;
}

/* A Back/next button that is a link (reset page), placed like the 2010 panel's Back button. */
.btn2-link {
  margin: 15px 0 0 15px;
  text-decoration: none;
}

/* The Login box's "Forgot my password" and "Resend activation link" links under the Login button, like the 2009 box's links (11px, centered). */
.forgot-link {
  display: block;
  margin: 6px 0 0;
  font: 11px/14px Arial, Helvetica, sans-serif;
  text-align: center;
}

.forgot-link + .forgot-link {
  margin-top: 2px;
}

/* The Login box's Account button (a link) above Logout. */
.login-form .btn-account {
  margin-bottom: 8px;
  text-decoration: none;
}

.register-screen {
  float: right;
  width: 182px;
  margin: 32px 12px 0 0;
}

.register-screen img {
  display: block;
}

/* Korean (index.ko.html, parts\*.ko.html): Arial has no Hangul, so name the Korean system fonts after it (the Latin
   letters stay Arial), and break lines between words, not inside them. */
html:lang(ko) body,
html:lang(ko) body * {
  font-family: Arial, "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Dotum, sans-serif;
  word-break: keep-all;
}