/* ─── Font ───────────────────────────────────────────────── */
/* Monocraft by Idrees Hassan, SIL Open Font License 1.1 (assets/fonts/OFL.txt).
   Its em is 9 font-pixels tall, so sizes that are multiples of 9px (9, 18, 27, 36)
   land every pixel on the screen grid: 18px = the game's "GUI scale 2".
   Only the regular weight is loaded; bold is drawn the game's way (see "Game-style bold"). */
@font-face {
  font-family: "Monocraft";
  src: url("../assets/fonts/Monocraft-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --gui: #c6c6c6;
  --gui-hi: #ffffff;
  --gui-lo: #555555;
  --gui-ink: #404040;
  --ink: #2b2b2b;
  --well: #b3b3b3;

  --slot: #8b8b8b;
  --slot-lo: #373737;
  --slot-hi: #ffffff;
  --slot-hover: #a8a8a8;
  --slot-active: #c5c5c5;

  --btn: #6b6b6b;
  --btn-hi: #a9a9a9;
  --btn-lo: #474747;
  --btn-hover: #5a6db0;

  --tip-bg: #170f22;
  --tip-edge: #4b2a8a;
  --tip-dim: #c4b5ff;

  --wood: #2b1f25;
  --cream: #f1e6d4;
  --link: #1d3f8a;
  --yellow: #ffff55;
  --aqua: #55ffff;
  --xp: #80d632;
  --xp-text: #80ff20;

  --font: "Monocraft", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-1: 9px;
  --fs-2: 18px;
  --fs-3: 27px;
  --fs-4: 36px;
  --lh: 27px;

  --hud-space: 168px;
}

/* ─── Base ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--wood);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-2);
  line-height: var(--lh);
  /* Monocraft ships coding ligatures (->, ==, …); keep plain game text */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  /* never let the browser fake a bold or italic of the pixel font */
  font-synthesis: none;
  padding-bottom: var(--hud-space);
  /* hidden tooltips near the edge must not widen the page */
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

/* Game-style text shadow on every piece of text: a dark gray copy one font-pixel
   (1/9 em) down and right. Declared on every element rather than inherited, so each
   element's shadow scales with its own font size. */
* {
  text-shadow: calc(1em / 9) calc(1em / 9) 0 #3f3f3f;
}

/* The world behind the menus: a fixed pixel-art scene, dimmed the way the game dims
   the world while a menu is open. */
.world {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #e9c3bb url("../assets/world.svg") center bottom / cover no-repeat;
}

.world::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 18, 0.42);
}

button,
input {
  font: inherit;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--link);
}

ul,
ol {
  margin: 0;
}

h1,
h2,
h3,
dt,
strong,
b {
  font-weight: 400;
}

/* Game-style bold. The game draws bold text twice, one font-pixel apart, and makes each
   character one font-pixel wider; the drop shadow is doubled the same way. */
strong,
b,
.logo span,
.profile-name,
.panel-title,
.recipe-title,
.inspect-name,
.chat-title {
  letter-spacing: calc(1em / 9);
  text-shadow:
    calc(1em / 9) 0 0 currentColor,
    calc(1em / 9) calc(1em / 9) 0 #3f3f3f,
    calc(2em / 9) calc(1em / 9) 0 #3f3f3f;
}

/* Dark text on the light gray panels and slots gets no drop shadow, like the labels in
   the game's own menus; bold text there keeps only its double-draw. Light text on the
   dark parts inside a panel (buttons, tooltips, the inspect pane) keeps the full shadow. */
.panel *,
.hot,
.hot * {
  text-shadow: none;
}

.panel strong,
.panel .profile-name,
.panel .panel-title,
.panel .recipe-title {
  text-shadow: calc(1em / 9) 0 0 currentColor;
}

.panel .btn,
.panel .tip,
.panel .tip *,
.panel .inspect,
.panel .inspect *,
.panel .avatar {
  text-shadow: calc(1em / 9) calc(1em / 9) 0 #3f3f3f;
}

.panel .tip strong,
.panel .inspect strong,
.panel .inspect-name {
  text-shadow:
    calc(1em / 9) 0 0 currentColor,
    calc(1em / 9) calc(1em / 9) 0 #3f3f3f,
    calc(2em / 9) calc(1em / 9) 0 #3f3f3f;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

section[id] {
  scroll-margin-top: 24px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 16px;
  z-index: 100;
  padding: 9px 18px;
  background: #000;
  color: #fff;
}

.skip-link:focus {
  left: 16px;
}

/* ─── Shared GUI pieces ──────────────────────────────────── */
.panel {
  background: var(--gui);
  border: 3px solid #000;
  box-shadow: inset 4px 4px 0 var(--gui-hi), inset -4px -4px 0 var(--gui-lo);
  padding: 28px;
}

.panel-title {
  margin: 0 0 9px;
  font-size: var(--fs-3);
  font-weight: 400;
  line-height: 36px;
  color: var(--gui-ink);
}

.panel-sub {
  margin: 0 0 18px;
  color: var(--gui-ink);
}

.label {
  margin: 9px 0 0;
  font-size: var(--fs-2);
  font-weight: 400;
  line-height: var(--lh);
  color: var(--gui-ink);
}

.slot {
  --size: 56px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  background: var(--slot);
  box-shadow: inset 3px 3px 0 var(--slot-lo), inset -3px -3px 0 var(--slot-hi);
  color: #111;
  font-size: var(--fs-2);
  line-height: 1;
}

button.slot {
  cursor: pointer;
}

button.slot:hover,
a.slot:hover {
  background: var(--slot-hover);
}

.slot:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 9px 18px;
  border: 3px solid #000;
  background: var(--btn);
  box-shadow: inset 3px 3px 0 var(--btn-hi), inset -3px -3px 0 var(--btn-lo);
  color: #fff;
  font-size: var(--fs-2);
  line-height: var(--lh);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  background: var(--btn-hover);
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.btn:active {
  box-shadow: inset -3px -3px 0 var(--btn-hi), inset 3px 3px 0 var(--btn-lo);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 9px;
}

/* Tooltip shown above a slot on hover, focus or tap, styled like an item tooltip */
.tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: max-content;
  max-width: min(360px, 80vw);
  padding: 4px 10px 6px;
  border: 2px solid var(--tip-edge);
  background: var(--tip-bg);
  box-shadow: 0 0 0 2px #0a0610;
  color: #fff;
  font-size: var(--fs-2);
  line-height: var(--lh);
  text-align: left;
  transform: translateX(calc(-50% + var(--tip-shift, 0px)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* item-tooltip style: name on the first line, details below it */
.tip-dim {
  display: block;
  color: var(--tip-dim);
}

.has-tip:hover .tip,
.has-tip:focus-visible .tip,
.has-tip.is-open .tip {
  opacity: 1;
  visibility: visible;
}

/* ─── Header / footer ────────────────────────────────────── */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 9px 24px;
  padding-top: 27px;
  padding-bottom: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  color: #fff;
  font-size: var(--fs-3);
  line-height: 36px;
  text-decoration: none;
}

.site-tagline {
  margin: 0;
  color: var(--cream);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 9px 18px;
  margin-top: 40px;
  color: var(--cream);
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  padding: 9px 0;
  color: #fff;
}

/* ─── Profile ────────────────────────────────────────────── */
.profile {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.avatar {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #000;
  box-shadow: inset 3px 3px 0 var(--slot-lo), inset -3px -3px 0 var(--slot-hi);
  color: #d0d0d0;
  text-align: center;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar.has-image {
  padding: 3px;
}

.profile-body {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-name {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 400;
  line-height: 45px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.profile-about {
  margin: 0;
  max-width: 660px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}

.stat {
  flex: 1 1 180px;
  padding: 9px 14px 11px;
  background: var(--well);
  box-shadow: inset 3px 3px 0 var(--slot), inset -3px -3px 0 #e0e0e0;
}

.stat dt {
  color: var(--gui-ink);
}

.stat dd {
  margin: 0;
  color: #111;
}

.slot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  list-style: none;
}

/* ─── Crafting recipes (experience) ──────────────────────── */
.recipes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.recipe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding: 18px;
  background: var(--well);
  box-shadow: inset 2px 2px 0 var(--slot), inset -2px -2px 0 #e0e0e0;
}

.craft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.craft-grid {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  gap: 3px;
}

.craft-grid .slot {
  --size: 42px;
  font-size: var(--fs-1);
  box-shadow: inset 2px 2px 0 var(--slot-lo), inset -2px -2px 0 var(--slot-hi);
}

.craft-result {
  --size: 72px;
}

.recipe-body {
  flex: 1 1 300px;
  min-width: 0;
}

.recipe-title {
  margin: 0;
  font-size: var(--fs-2);
  line-height: var(--lh);
  color: #1f1f1f;
}

.recipe-meta {
  margin: 0 0 4px;
  color: var(--link);
}

.recipe-body ul {
  padding-left: 22px;
}

/* ─── Project chest ──────────────────────────────────────── */
.chest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.chest-grid {
  flex: 1 1 560px;
  min-width: 0;
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
}

.chest-grid .slot {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.chest-grid .slot svg {
  width: 66%;
  height: 66%;
}

.chest-grid .slot img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}

/* Keyboard focus in the chest already shows the item in the inspect panel. */
.chest-grid .has-tip:focus-visible:not(:hover) .tip {
  opacity: 0;
  visibility: hidden;
}

.chest-grid .slot[aria-pressed="true"] {
  z-index: 1;
  background: var(--slot-active);
  box-shadow: 0 0 0 3px #fff, inset 3px 3px 0 var(--slot-lo), inset -3px -3px 0 var(--slot-hi);
}

.inspect {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px;
  border: 3px solid #0a0610;
  background: var(--tip-bg);
  box-shadow: inset 0 0 0 3px var(--tip-edge);
  color: #fff;
}

.inspect-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: 300px;
  overflow: hidden;
  background: #2b2433;
  background: color-mix(in srgb, var(--preview, #3a3a3a) 40%, #120c1a);
  box-shadow: inset 4px 4px 0 rgba(255, 255, 255, 0.18), inset -4px -4px 0 rgba(0, 0, 0, 0.3);
}

.inspect-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inspect-preview svg {
  width: 96px;
  height: 96px;
}

.inspect-name {
  margin: 6px 0 0;
  font-size: var(--fs-3);
  line-height: 36px;
  overflow-wrap: anywhere;
}

.inspect p {
  margin: 0;
}

.inspect-desc {
  color: #e4e4e4;
}

.inspect-meta {
  color: #aaaaaa;
}

/* ─── Chat (contact) ─────────────────────────────────────── */
.chat {
  padding: 22px 24px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
}

.chat-title {
  margin: 0 0 9px;
  font-size: var(--fs-3);
  font-weight: 400;
  line-height: 36px;
  color: var(--yellow);
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 340px;
  padding: 0 6px 0 0;
  overflow-y: auto;
  list-style: none;
  overflow-wrap: anywhere;
  scrollbar-color: #6b6b6b transparent;
}

.chat-log .is-out {
  color: #e0e0e0;
}

.chat-log .is-good {
  color: #55ff55;
}

.chat-log .is-bad {
  color: #ff5555;
}

.chat-dim {
  color: #aaaaaa;
}

.chat-log a {
  color: var(--aqua);
}

.chat-log a:hover,
.chat-log a:focus-visible {
  color: #fff;
}

/* clickable chat text: runs a command, copies text, or jumps to a section */
.chat-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--aqua);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.chat-link:hover,
.chat-link:focus-visible {
  color: #fff;
}

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

.chat-log .is-system {
  color: var(--yellow);
}

.chat-log .is-you {
  color: #d8d8d8;
}

.chat-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.chat-field {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-field label {
  color: #d8d8d8;
}

.chat-input-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* command suggestions, shown above the input like the game's chat */
.chat-suggest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  z-index: 5;
  max-height: 243px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 2px solid #555;
  background: rgba(0, 0, 0, 0.88);
  list-style: none;
}

.chat-suggest[hidden] {
  display: none;
}

.suggest-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  width: 100%;
  padding: 2px 8px;
  border: 0;
  background: none;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.suggest-item:hover,
.suggest-item.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--yellow);
}

.chat-field input {
  height: 48px;
  padding: 0 12px;
  border: 2px solid #a0a0a0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: var(--fs-2);
}

.chat-field input::placeholder {
  color: #bdbdbd;
}

.chat-field input:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 0;
}

/* ─── HUD: XP bar + hotbar (fixed at bottom) ─────────────── */
.hud {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  transform: translateX(-50%);
}

.xp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.xp-level {
  margin: 0;
  font-size: var(--fs-2);
  line-height: var(--lh);
  color: var(--xp-text);
  /* the game outlines the level number in black */
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
  white-space: nowrap;
}

.xp-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border: 2px solid #000;
  background: #1a1a1a;
}

.xp-fill {
  width: 0;
  height: 100%;
  background: var(--xp);
  box-shadow: inset 0 -3px 0 #4f9a1a;
}

/* segment notches */
.xp-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #000 calc(10% - 2px) 10%);
  pointer-events: none;
}

.hotbar {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 3px solid #000;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 2px #5a5a5a;
  list-style: none;
}

.hot {
  --size: 72px;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-1);
  text-decoration: none;
}

.hot .key {
  position: absolute;
  top: 5px;
  left: 6px;
  color: #1f1f1f;
}

.hot.is-active {
  background: var(--slot-active);
  box-shadow: 0 0 0 3px #fff, inset 3px 3px 0 var(--slot-lo), inset -3px -3px 0 var(--slot-hi);
}

/* ─── Small screens ──────────────────────────────────────── */
@media (max-width: 700px) {
  .chest-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  :root {
    --hud-space: 150px;
  }

  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .stack {
    gap: 28px;
  }

  .panel {
    padding: 20px 16px;
  }

  .logo {
    font-size: var(--fs-2);
    line-height: var(--lh);
  }

  .profile-name {
    font-size: var(--fs-3);
    line-height: 36px;
  }

  .avatar {
    width: 140px;
    height: 140px;
  }

  .hot {
    --size: min(60px, calc((100vw - 48px) / 4));
  }

  .hot svg {
    width: 24px;
    height: 24px;
  }

  .hot .key {
    display: none;
  }
}

@media (max-width: 420px) {
  .craft-grid {
    grid-template-columns: repeat(3, 34px);
  }

  .craft-grid .slot {
    --size: 34px;
  }

  .craft {
    gap: 10px;
  }

  .craft-arrow {
    width: 28px;
  }

  .craft-result {
    --size: 60px;
  }
}