/* The world page: one full-bleed canvas, with plain HTML floating above it. */

/* Itim (SIL Open Font License, see fonts/Itim-OFL.txt): casual and compact,
   in the spirit of the hand-lettered font Terraria's menus use. */
@font-face {
  font-family: Itim;
  src: url("fonts/Itim-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #fff;
  --outline: #000;
  --hover: #ffd83d; /* the gold Terraria's menus turn under the cursor */
  --link: #9fd3ff;
}

[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  color: var(--ink);
  font: 16px/1.3 Itim, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Drawn in art pixels; the browser enlarges it nearest-neighbour. */
#world, #logo {
  image-rendering: crisp-edges; /* Firefox before 93 */
  image-rendering: pixelated;
}

#world {
  position: absolute;
  top: 0;
  left: 0;
}

/* White lettering with a hard dark outline, as in Terraria's menus. */
.outlined {
  text-shadow:
    -2px -2px 0 var(--outline), 0 -2px 0 var(--outline), 2px -2px 0 var(--outline),
    -2px  0   0 var(--outline),                          2px  0   0 var(--outline),
    -2px  2px 0 var(--outline), 0  2px 0 var(--outline), 2px  2px 0 var(--outline);
}

#loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: clamp(18px, 3vw, 28px);
}

/* Menu items and corner links grow and turn gold under the cursor, as Terraria's do. */
.reading-link, #menu-button, .menu > *, #about-close, .links a {
  color: var(--ink);
  font: inherit;
  text-shadow: inherit; /* buttons don't inherit it by default */
  text-decoration: none;
  background: none;
  border: 0;
  padding: 2px 10px;
  cursor: pointer;
  transition: transform .12s, color .12s;
}

.reading-link:hover, .reading-link:focus-visible,
#menu-button:hover, #menu-button:focus-visible,
.menu > :hover, .menu > :focus-visible,
#about-close:hover, #about-close:focus-visible,
.links a:hover, .links a:focus-visible {
  color: var(--hover);
  transform: scale(1.1);
}

:focus-visible {
  outline: 2px solid var(--hover);
  outline-offset: 4px;
}

.reading-link {
  position: fixed;
  z-index: 1;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  transform-origin: right bottom;
}

#menu-button {
  position: fixed;
  z-index: 1;
  top: max(12px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  font-size: 18px;
  transform-origin: right top;
}

/* The title screen: Terraria's main menu, over the world drifting behind it. */
body.at-title .reading-link, body.at-title #loading { display: none; }

#title {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center; /* never clip the top when it's taller than the screen */
  gap: 10px;
  box-sizing: border-box;
  padding-block: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-bottom));
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  overflow-y: auto;
  text-align: center;
  background: radial-gradient(ellipse at 50% 45%, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / .4));
}

#title h1 {
  margin: 0 0 18px;
  line-height: 0;
}

#logo { filter: drop-shadow(0 6px 0 rgb(0 0 0 / .35)); }

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: clamp(26px, 4.4vw, 38px);
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 6px;
  margin: 18px 0 0;
  font-size: 17px;
}

/* A Terraria panel: translucent navy, a dark rim and a lighter inner edge. */
.panel {
  box-sizing: border-box;
  width: min(600px, 100%);
  padding: 16px 20px 12px;
  text-align: left;
  font-size: 16px;
  line-height: 1.45;
  text-shadow: 0 2px 0 rgb(0 0 0 / .6);
  background: rgb(38 51 110 / .9);
  border: 3px solid rgb(18 24 58);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgb(92 112 190 / .55);
}

.panel h2, .panel h3 {
  margin: 0 0 8px;
  font-weight: 400;
  color: var(--hover);
}

.panel h2 { font-size: 26px; }
.panel h3 { margin-top: 14px; font-size: 20px; }
.panel p { margin: 0 0 10px; }
.panel a, #title noscript a { color: var(--link); }
.panel a:hover, .panel a:focus-visible { color: var(--hover); }

/* Speech bubbles over the characters' heads, placed by script in CSS px. */
#bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: 220px;
  margin: 0;
  padding: 4px 9px 5px;
  color: #1c1b19;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  background: #fffdf6;
  border: 2px solid #1c1b19;
  border-radius: 8px;
  box-shadow: 0 2px 0 rgb(0 0 0 / .25);
}

/* An emote, like a hummed note: just the symbol, in a small bubble. */
.bubble.emote {
  padding: 0 8px 2px;
  font-size: 20px;
  line-height: 1.2;
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -5px;
  background: #fffdf6;
  border: 2px solid #1c1b19;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

/* The name of the place you've just walked into, floating up as it fades. */
#place-name {
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 34px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}

#place-name.shown { animation: place-name 3.4s ease-out both; }

@keyframes place-name {
  0% { opacity: 0; transform: translateY(14px); }
  15% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; transform: translateY(-5px); }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* Without motion, it only fades in and out. */
@keyframes place-name-still {
  0%, 100% { opacity: 0; }
  12%, 80% { opacity: 1; }
}

/* A sign's text, opened at the top of the screen as Terraria opens it. */
.sign-panel {
  position: fixed;
  z-index: 1;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 32px));
  padding-bottom: 6px;
}

.sign-panel h2 { font-size: 22px; margin-bottom: 6px; }

.panel kbd {
  font: inherit;
  padding: 0 5px;
  background: rgb(0 0 0 / .25);
  border: 1px solid rgb(255 255 255 / .5);
  border-radius: 3px;
}

/* Narrow screens: below the Menu button rather than under it. */
@media (max-width: 640px) {
  .sign-panel { top: calc(max(12px, env(safe-area-inset-top)) + 40px); }
  #place-name { font-size: 26px; }
}

#about-close {
  display: block;
  margin: 6px auto 0;
  font-size: 22px;
}

#debug {
  position: fixed;
  z-index: 3;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  margin: 0;
  padding: 6px 8px;
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  background: rgb(0 0 0 / .55);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reading-link, #menu-button, .menu > *, #about-close, .links a { transition: none; }
  #place-name.shown { animation-name: place-name-still; }
}