/* Minecraft-styled theme (ADR-011). Tokens are documented in docs/ux-design.md. */

@font-face {
  font-family: "Monocraft";
  src: url("../fonts/Monocraft.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Monocraft";
  src: url("../fonts/Monocraft-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #8b8b8b;
  --page-shade: rgb(0 0 0 / 0.3);
  --panel: #c6c6c6;
  --panel-hi: #ffffff;
  --panel-lo: #555555;
  --outline: #000000;
  --slot: #b3b3b3;
  --slot-hi: #373737;
  --slot-lo: #ffffff;
  --ink: #262626;
  --ink-2: #3f3f3f;
  --ink-muted: #4f4f4f;
  --accent: #1d5fa8;
  --accent-wash: rgb(29 95 168 / 10%);
  --link: #174b85;
  --good: #1e6b1e;
  --warn: #8a5a00;
  --bad: #a11818;
  --grid: #a3a3a3;
  --heading-shadow: none;
  --bar: #2b2b2b;
  --bar-ink: #ffffff;
  --button: #6f6f6f;
  --button-hi: #aaaaaa;
  --button-lo: #4a4a4a;
  --button-hover: #7a86c2;
  --button-danger: #8a2a2a;
  --button-ink: #ffffff;
  --meter-track: #3a3a3a;
  --meter-good: #5aa832;
  --meter-warn: #e0a020;
  --meter-bad: #d63a3a;

  --font-pixel: "Monocraft", ui-monospace, monospace;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gap: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #17121c;
    --page-shade: rgb(23 18 28 / 0.8);
    --panel: #1c1424;
    --panel-hi: #5000ff;
    --panel-lo: #28007f;
    --outline: #0a0610;
    --slot: #2a2033;
    --slot-hi: #0d0912;
    --slot-lo: #3e3249;
    --ink: #f2f2f2;
    --ink-2: #c9c1d1;
    --ink-muted: #a69eae;
    --accent: #3d9be0;
    --accent-wash: rgb(61 155 224 / 10%);
    --link: #7cc0f0;
    --good: #55ff55;
    --warn: #ffaa00;
    --bad: #ff5555;
    --grid: #3a2f45;
    --heading-shadow: 2px 2px 0 #3c3c3c;
    --bar: #0d0912;
    --meter-track: #120d18;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #17121c;
  --page-shade: rgb(23 18 28 / 0.8);
  --panel: #1c1424;
  --panel-hi: #5000ff;
  --panel-lo: #28007f;
  --outline: #0a0610;
  --slot: #2a2033;
  --slot-hi: #0d0912;
  --slot-lo: #3e3249;
  --ink: #f2f2f2;
  --ink-2: #c9c1d1;
  --ink-muted: #a69eae;
  --accent: #3d9be0;
  --accent-wash: rgb(61 155 224 / 10%);
  --link: #7cc0f0;
  --good: #55ff55;
  --warn: #ffaa00;
  --bad: #ff5555;
  --grid: #3a2f45;
  --heading-shadow: 2px 2px 0 #3c3c3c;
  --bar: #0d0912;
  --meter-track: #120d18;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
}

/* Dirt, darkened like the game's menu screens; a separate layer so pixelated scaling stays off other images. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--page-shade), var(--page-shade)), url("/textures/dirt.png");
  background-size: auto, 64px 64px;
  image-rendering: pixelated;
}

h1,
h2,
h3 {
  font-family: var(--font-pixel);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
  text-shadow: var(--heading-shadow);
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 14px;
}

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

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

.pixel {
  font-family: var(--font-pixel);
}

.num {
  font-family: var(--font-pixel);
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--ink-muted);
}

.secondary {
  color: var(--ink-2);
}

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

/* Panel: inventory window in light mode, tooltip in dark mode. */
.panel {
  background: var(--panel);
  border: 2px solid var(--outline);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 var(--panel-hi),
    inset -2px -2px 0 var(--panel-lo);
  padding: 14px 16px;
  min-width: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel {
    box-shadow: none;
    border: 2px solid var(--outline);
    background:
      linear-gradient(var(--panel), var(--panel)) padding-box,
      linear-gradient(180deg, var(--panel-hi), var(--panel-lo)) border-box;
    border-color: transparent;
    outline: 2px solid var(--outline);
    outline-offset: 0;
  }
}

:root[data-theme="dark"] .panel {
  box-shadow: none;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(180deg, var(--panel-hi), var(--panel-lo)) border-box;
  border-color: transparent;
  outline: 2px solid var(--outline);
}

/* Slot: inset area. */
.slot {
  background: var(--slot);
  box-shadow:
    inset 2px 2px 0 var(--slot-hi),
    inset -2px -2px 0 var(--slot-lo);
  padding: 8px 10px;
  min-width: 0;
}

/* Button, after the game's menu buttons. */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 2px solid #000;
  border-radius: 0;
  background: var(--button);
  box-shadow:
    inset 2px 2px 0 var(--button-hi),
    inset -2px -3px 0 var(--button-lo);
  color: var(--button-ink);
  font-family: var(--font-pixel);
  font-size: 13px;
  text-shadow: 2px 2px 0 #3f3f3f;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover {
  background: var(--button-hover);
}

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

.btn:disabled {
  background: #2c2c2c;
  box-shadow: none;
  color: #a0a0a0;
  text-shadow: none;
  cursor: not-allowed;
}

.btn.danger {
  background: var(--button-danger);
}

.btn.danger:hover {
  background: #b03a3a;
}

.btn.small {
  min-height: 30px;
  padding: 3px 10px;
  font-size: 12px;
}

.btn.selected {
  background: #4a5590;
  box-shadow:
    inset 2px 2px 0 #8c97d6,
    inset -2px -3px 0 #2f3767;
}

/* Inputs sit in slots. */
.input,
select.input {
  appearance: none;
  min-height: 36px;
  width: 100%;
  padding: 6px 10px;
  border: 2px solid #000;
  border-radius: 0;
  background: var(--slot);
  box-shadow:
    inset 2px 2px 0 var(--slot-hi),
    inset -2px -2px 0 var(--slot-lo);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: 13px;
}

select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) 55%,
    calc(100% - 10px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

label.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

label.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Status: colored square plus a word. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-pixel);
  font-size: 12px;
}

.status::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--ink-muted);
  box-shadow: inset -2px -2px 0 rgb(0 0 0 / 30%);
  flex: none;
}

.status.good::before {
  background: var(--good);
}

.status.warn::before {
  background: var(--warn);
}

.status.bad::before {
  background: var(--bad);
}

/* Meter: XP-bar-style track. */
.meter {
  height: 10px;
  background: var(--meter-track);
  border: 2px solid #000;
  position: relative;
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  background: var(--meter-good);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 35%);
}

.meter.warn > span {
  background: var(--meter-warn);
}

.meter.bad > span {
  background: var(--meter-bad);
}

.icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  flex: none;
  vertical-align: -3px;
}

.icon.lg {
  width: 24px;
  height: 24px;
}

.icon.render {
  image-rendering: auto;
}

.head {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  border: 2px solid #000;
  flex: none;
  background: #636363;
}

dialog.panel {
  color: var(--ink);
  max-width: min(440px, calc(100vw - 32px));
  width: 100%;
}

dialog::backdrop {
  background: rgb(0 0 0 / 60%);
}