/* wowrussia.com (2007) on a modern responsive stack.

   Every colour below is sampled from the SWF, not chosen:
     #ff0062  stage background        (shape c1)
     #ffffff  landmass                (shapes c6 / c1090)
     #6d0035  menu labels             (DefineEditText colour)
     #ffe600 #009ae2 #a123e1 #5dc313 #ff6600   the five popup frames (ramka_*)

   The original was a fixed 1024x768 Flash stage. Here the same composition -
   wordmark, menu, map, icon strip - fills the viewport at any size. Text is real
   HTML in a live font rather than vector outlines, so it stays sharp and
   selectable at every scale. */

:root {
  --bg: #ff0062;
  --land: #ffffff;
  --menu: #6d0035;
  --ink: #1b1b1f;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(14px, 2.6vw, 34px);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.45;
  overflow: hidden;                    /* the composition fits the viewport */
}

.site {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* ---------------------------------------------------------------- header */
.head {
  padding: var(--pad) var(--pad) 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mark menu" "tag menu";
  column-gap: clamp(16px, 4vw, 56px);
  align-items: start;
}

.wordmark {
  grid-area: mark;
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.02em;
  color: #fff;
}

.tagline {
  grid-area: tag;
  margin: .25em 0 0 .1em;
  font-size: clamp(.8rem, 1.35vw, 1.05rem);
  color: var(--ink);
}

.menu { grid-area: menu; }

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px clamp(12px, 2vw, 26px);
}

.menu button {
  font: inherit;
  font-size: clamp(.8rem, 1.3vw, 1rem);
  color: var(--menu);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}

.menu button:hover,
.menu button:focus-visible { border-bottom-color: var(--menu); }
.menu button:focus-visible { outline: 2px solid var(--menu); outline-offset: 3px; }

/* ---------------------------------------------------------------- map */
.map-wrap {
  min-height: 0;
  padding: clamp(6px, 1.4vh, 20px) var(--pad);
  display: grid;
  place-items: center;
}

/* The map keeps the artwork's own aspect ratio and grows to fill whatever space
   the header and strip leave over. */
.map {
  position: relative;
  aspect-ratio: var(--map-ar, 953 / 518);
  width: min(100%, calc((100dvh - var(--chrome, 260px)) * var(--map-ar, 1.84)));
  max-height: 100%;
}

.map-art {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.pins { position: absolute; inset: 0; }

.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1.5), filter .16s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}

.pin img { display: block; width: 100%; height: auto; pointer-events: none; }

.pin:hover, .pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.32);
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .3));
  z-index: 4;
}

.pin:focus-visible { outline: 2px solid var(--menu); outline-offset: 3px; border-radius: 4px; }

.cities { position: absolute; inset: 0; pointer-events: none; }

.city {
  position: absolute;
  margin: 0;
  transform: translateY(-50%);
  font-size: clamp(.55rem, 1.05vw, .9rem);
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- strip */
.strip {
  background: var(--land);
  padding: clamp(6px, 1.1vh, 14px) clamp(8px, 1.6vw, 22px);
}

.strip-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1600px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2px, .5vw, 10px);
}

.strip button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1.5);
}

.strip button:hover,
.strip button:focus-visible { transform: translateY(-5px) scale(1.14); }
.strip button:focus-visible { outline: 2px solid var(--menu); outline-offset: 3px; border-radius: 4px; }

.strip img {
  display: block;
  height: clamp(26px, 4.6vh, 52px);
  width: auto;
  pointer-events: none;
}

/* ---------------------------------------------------------------- sheet */
.sheet {
  width: min(1040px, 94vw);
  max-height: 92dvh;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  overflow: visible;
}

.sheet::backdrop { background: rgba(60, 0, 28, .6); backdrop-filter: blur(3px); }
.sheet:focus, .sheet:focus-visible { outline: none; }

.sheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(16px, 2.6vw, 34px);
  padding: clamp(20px, 3vw, 40px);
  max-height: 92dvh;
  overflow-y: auto;
}

.sheet-art { margin: 0; display: grid; place-items: center; min-height: 0; }
.sheet-art img { width: 100%; height: auto; max-height: 52dvh; object-fit: contain; }

.sheet-copy { min-width: 0; }

.sheet-title {
  margin: 0 0 .55em;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.05;
  color: var(--title, #5dc313);
}

/* Real text in a real font - the point of this rebuild. */
.sheet-text { font-size: clamp(.95rem, 1.15vw, 1.06rem); line-height: 1.6; }
.sheet-text p { margin: 0 0 1em; }
.sheet-text p:last-child { margin-bottom: 0; }
.sheet-text a { color: #009ae2; }

/* Menu popups are framed in their original colour. */
.sheet--page { background: var(--frame, #ffe600); }
.sheet--page .sheet-grid { grid-template-columns: minmax(0, 1fr); }
.sheet--page .sheet-title { color: #fff; }
.sheet--page .sheet-text {
  background: #fffdf2;
  border-radius: 4px;
  padding: clamp(16px, 2.2vw, 28px);
}

.sheet-close {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .34);
}

.sheet-close:hover { background: var(--bg); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  body { overflow: auto; }
  .site { height: auto; min-height: 100dvh; }
  .head { grid-template-columns: 1fr; grid-template-areas: "mark" "tag" "menu"; }
  .menu { margin-top: .8em; }
  .map { width: 100%; }
  .strip-list { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
  .sheet-grid { grid-template-columns: minmax(0, 1fr); }
  .sheet-art img { max-height: 34dvh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}