/* =====================================================================
   Minecraft Hour - interface
   ---------------------------------------------------------------------
   The look is "ember and slate": deep blue black panels with hard,
   carved edges and a single warm accent colour. Nothing is glossy -
   every surface is a flat plane with a lit edge and a shadowed edge, so
   the interface reads like something chiselled rather than something
   generated. All type is drawn from the hand made pixel font, so the
   whole interface keeps the same hand at every size.
   ===================================================================== */

:root {
  --ink: #05070b;
  --slate-950: #0b0e14;
  --slate-900: #12161f;
  --slate-850: #171c26;
  --slate-800: #1e2430;
  --slate-700: #28303e;
  --slate-600: #374153;
  --slate-500: #4d586e;
  --edge-hi: #5d6a83;
  --ember: #e8863c;
  --ember-hi: #ffb169;
  --ember-lo: #8f4715;
  --bone: #ece6d8;
  --bone-dim: #98a1b0;
  --danger: #cf5348;
  --good: #74b15c;
  --gui-scale: 1;
  --pixel: 2;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
  font-size: calc(14px * var(--gui-scale));
  user-select: none;
  cursor: default;
}

#app {
  position: fixed;
  inset: 0;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

body.playing #game-canvas {
  cursor: none;
}

.hidden {
  display: none !important;
}

/* The pixel text is an image, so it has to sit on its own line. */
img.px-text {
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

/* The wording is kept for screen readers only. */
.px-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.has-px {
  font-size: 0;
  line-height: 0;
}

.has-px img.px-text {
  margin: 0 auto;
}

.has-px[style*='--px-align: left'] img.px-text {
  margin: 0;
}

/* ------------------------------------------------------------ tints --- */

.tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease-out;
  z-index: 2;
}

#tint-water {
  background: linear-gradient(rgba(24, 78, 168, 0.42), rgba(12, 44, 108, 0.55));
}

#tint-lava {
  background: radial-gradient(circle at 50% 50%, rgba(220, 80, 10, 0.55), rgba(140, 30, 0, 0.9));
}

#tint-damage {
  background: radial-gradient(circle at 50% 50%, rgba(200, 20, 20, 0) 45%, rgba(170, 15, 15, 0.55));
}

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 0 220px rgba(0, 0, 0, 0.55);
  opacity: 0.85;
}

/* ---------------------------------------------------------------- hud -- */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

#crosshair::before,
#crosshair::after {
  content: '';
  position: absolute;
  background: #f2f2f2;
  mix-blend-mode: difference;
}

#crosshair::before {
  left: 8px;
  top: 0;
  width: 2px;
  height: 18px;
}

#crosshair::after {
  top: 8px;
  left: 0;
  height: 2px;
  width: 18px;
}

#item-name {
  position: absolute;
  left: 50%;
  top: calc(50% + 34px);
  transform: translate(-50%, 0);
  padding: 4px 10px;
  background: rgba(5, 7, 11, 0.72);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px rgba(93, 106, 131, 0.5);
  opacity: 0;
  transition: opacity 260ms ease-out;
  z-index: 5;
}

#item-name.show {
  opacity: 1;
}

#hud-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(12px * var(--gui-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#status-bars {
  display: flex;
  justify-content: space-between;
  width: calc(366px * var(--gui-scale));
  min-height: calc(20px * var(--gui-scale));
}

.bar-row {
  display: flex;
  gap: 1px;
}

#hearts .icon,
#hunger .icon,
#air-bubbles .icon {
  width: calc(9px * var(--gui-scale));
  height: calc(9px * var(--gui-scale));
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

#air-bubbles {
  justify-content: flex-end;
}

#hotbar {
  position: relative;
  display: flex;
  gap: 0;
  padding: calc(3px * var(--gui-scale));
  background: var(--slate-900);
  border: 2px solid var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--slate-600),
    inset 0 2px 0 rgba(93, 106, 131, 0.35),
    0 4px 0 rgba(0, 0, 0, 0.45);
}

.hotbar-slot {
  position: relative;
  width: calc(40px * var(--gui-scale));
  height: calc(40px * var(--gui-scale));
  background: var(--slate-950);
  box-shadow:
    inset 2px 2px 0 var(--ink),
    inset -2px -2px 0 var(--slate-700);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotbar-slot + .hotbar-slot {
  margin-left: calc(1px * var(--gui-scale));
}

.hotbar-slot .item-icon,
.slot .item-icon,
.drag-stack .item-icon {
  width: 78%;
  height: 78%;
  image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hotbar-slot .count,
.slot .count,
.drag-stack .count {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: calc(11px * var(--gui-scale));
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

.hotbar-slot .dura,
.slot .dura {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: calc(3px * var(--gui-scale));
  background: var(--ink);
  pointer-events: none;
}

.hotbar-slot .dura i,
.slot .dura i {
  display: block;
  height: 100%;
  background: var(--good);
}

/* The frame that slides along the hot bar. */
.hotbar-selection {
  position: absolute;
  top: calc(3px * var(--gui-scale));
  left: 0;
  width: calc(40px * var(--gui-scale));
  height: calc(40px * var(--gui-scale));
  border: calc(2px * var(--gui-scale)) solid var(--ember);
  box-shadow: inset 0 0 0 calc(1px * var(--gui-scale)) rgba(255, 177, 105, 0.35);
  pointer-events: none;
  transition: transform 140ms cubic-bezier(0.2, 0.9, 0.25, 1);
  z-index: 2;
}

#debug {
  position: absolute;
  left: calc(8px * var(--gui-scale));
  top: calc(8px * var(--gui-scale));
  padding: calc(6px * var(--gui-scale)) calc(9px * var(--gui-scale));
  background: rgba(5, 7, 11, 0.62);
  border-left: calc(3px * var(--gui-scale)) solid var(--ember);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: calc(12px * var(--gui-scale));
  line-height: 1.45;
  color: var(--bone);
  white-space: pre;
  pointer-events: none;
  z-index: 6;
}

#toast-area {
  position: absolute;
  right: calc(12px * var(--gui-scale));
  top: calc(12px * var(--gui-scale));
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--gui-scale));
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  padding: calc(5px * var(--gui-scale)) calc(10px * var(--gui-scale));
  background: var(--slate-900);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-600), 0 3px 0 rgba(0, 0, 0, 0.45);
  color: var(--bone);
  font-size: calc(12px * var(--gui-scale));
  animation: toastIn 220ms ease-out;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------ screens -- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px * var(--gui-scale));
}

.menu-bg {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, 0.82);
}

.menu-bg.dim {
  background: rgba(5, 7, 11, 0.9);
}

/* The title screen shows the generated world behind it. */
#screen-main .menu-bg {
  background: rgba(5, 7, 11, 0.4);
  box-shadow: inset 0 0 320px rgba(5, 7, 11, 0.92);
}

.menu-bg.death {
  background: rgba(58, 12, 10, 0.55);
}

.menu-panel {
  position: relative;
  z-index: 2;
  min-width: calc(360px * var(--gui-scale));
  max-width: min(92vw, calc(560px * var(--gui-scale)));
  max-height: 92vh;
  overflow: auto;
  padding: calc(26px * var(--gui-scale)) calc(30px * var(--gui-scale));
  background: var(--slate-900);
  border: calc(3px * var(--gui-scale)) solid var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--slate-600),
    inset 0 3px 0 rgba(93, 106, 131, 0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.5),
    0 8px 0 rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--gui-scale));
  animation: panelIn 180ms ease-out;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.menu-panel.wide-panel {
  max-width: min(94vw, calc(760px * var(--gui-scale)));
}

.menu-panel.small-panel {
  min-width: calc(300px * var(--gui-scale));
}

.menu-panel.inventory-panel {
  max-width: min(96vw, calc(880px * var(--gui-scale)));
  padding: calc(18px * var(--gui-scale)) calc(22px * var(--gui-scale));
}

#logo {
  display: block;
  margin: 0 auto calc(4px * var(--gui-scale));
  image-rendering: pixelated;
}

.tagline {
  text-align: center;
  color: var(--bone-dim);
  font-size: calc(12px * var(--gui-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.byline {
  text-align: center;
  color: var(--bone-dim);
  font-size: calc(11px * var(--gui-scale));
  letter-spacing: 0.08em;
  margin: calc(4px * var(--gui-scale)) 0 calc(10px * var(--gui-scale));
}

.byline [data-credit] {
  color: var(--ember);
}

h1.game-title {
  margin: 0;
  text-align: center;
  font-size: calc(38px * var(--gui-scale));
  letter-spacing: 0.06em;
  color: var(--bone);
  text-shadow: calc(3px * var(--gui-scale)) calc(3px * var(--gui-scale)) 0 var(--ink);
}

h2 {
  margin: 0;
  text-align: center;
  font-size: calc(19px * var(--gui-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
}

h2.death-title {
  color: var(--danger);
}

.muted {
  color: var(--bone-dim);
  text-align: center;
  font-size: calc(12px * var(--gui-scale));
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--gui-scale));
}

.menu-buttons.row {
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.menu-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(10px * var(--gui-scale));
  border-top: 2px solid var(--slate-700);
  padding-top: calc(10px * var(--gui-scale));
  color: var(--bone-dim);
  font-size: calc(11px * var(--gui-scale));
}

/* ------------------------------------------------------------ buttons -- */

.mc-btn {
  position: relative;
  appearance: none;
  border: calc(2px * var(--gui-scale)) solid var(--ink);
  background: var(--slate-800);
  box-shadow:
    inset 0 calc(2px * var(--gui-scale)) 0 rgba(93, 106, 131, 0.45),
    inset 0 calc(-2px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.45),
    0 calc(3px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.5);
  color: var(--bone);
  padding: calc(9px * var(--gui-scale)) calc(16px * var(--gui-scale));
  min-height: calc(38px * var(--gui-scale));
  cursor: pointer;
  transition: background 90ms ease-out, transform 60ms ease-out, box-shadow 60ms ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mc-btn:hover {
  background: var(--slate-700);
  box-shadow:
    inset 0 calc(2px * var(--gui-scale)) 0 var(--edge-hi),
    inset 0 calc(-2px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.45),
    0 calc(3px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.5),
    0 0 0 calc(2px * var(--gui-scale)) var(--ember);
}

.mc-btn:hover img.px-text {
  filter: brightness(1.18);
}

.mc-btn:active {
  transform: translateY(calc(3px * var(--gui-scale)));
  box-shadow:
    inset 0 calc(2px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.35),
    inset 0 calc(2px * var(--gui-scale)) 0 var(--slate-600);
}

.mc-btn.primary {
  background: var(--ember-lo);
  box-shadow:
    inset 0 calc(2px * var(--gui-scale)) 0 var(--ember),
    inset 0 calc(-2px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.4),
    0 calc(3px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.5);
}

.mc-btn.primary:hover {
  background: var(--ember);
}

.mc-btn.danger {
  background: #4a1c18;
  box-shadow:
    inset 0 calc(2px * var(--gui-scale)) 0 #8a3a30,
    inset 0 calc(-2px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.4),
    0 calc(3px * var(--gui-scale)) 0 rgba(0, 0, 0, 0.5);
}

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

.mc-btn.wide {
  width: 100%;
}

.mc-btn.small {
  min-height: calc(28px * var(--gui-scale));
  padding: calc(4px * var(--gui-scale)) calc(10px * var(--gui-scale));
}

.mc-btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

/* ------------------------------------------------------------- inputs -- */

.field {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--gui-scale));
}

.field > span {
  font-size: calc(11px * var(--gui-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

input[type='text'],
input[type='number'] {
  background: var(--slate-950);
  border: calc(2px * var(--gui-scale)) solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-600);
  color: var(--bone);
  padding: calc(8px * var(--gui-scale)) calc(10px * var(--gui-scale));
  font-family: inherit;
  font-size: calc(13px * var(--gui-scale));
  outline: none;
}

input[type='text']:focus {
  box-shadow: inset 0 0 0 1px var(--ember), 0 0 0 2px var(--ember-lo);
}

.segmented {
  display: flex;
  border: calc(2px * var(--gui-scale)) solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-600);
  background: var(--slate-950);
}

.seg {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--bone-dim);
  padding: calc(7px * var(--gui-scale)) calc(8px * var(--gui-scale));
  cursor: pointer;
  font-size: calc(11px * var(--gui-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 90ms ease-out, color 90ms ease-out;
}

.seg + .seg {
  border-left: 1px solid var(--slate-700);
}

.seg:hover {
  background: var(--slate-800);
  color: var(--bone);
}

.seg.active {
  background: var(--ember-lo);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--ember);
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--gui-scale));
  padding-right: calc(4px * var(--gui-scale));
}

.slider-row {
  display: grid;
  grid-template-columns: calc(184px * var(--gui-scale)) 1fr calc(72px * var(--gui-scale));
  align-items: center;
  gap: calc(10px * var(--gui-scale));
  font-size: calc(12px * var(--gui-scale));
  color: var(--bone);
}

.slider-row > span {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: calc(11px * var(--gui-scale));
  color: var(--bone-dim);
  overflow: hidden;
  white-space: nowrap;
}

.slider-row output {
  text-align: right;
  color: var(--ember-hi);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: calc(12px * var(--gui-scale));
}

input[type='range'] {
  appearance: none;
  width: 100%;
  height: calc(18px * var(--gui-scale));
  background: transparent;
  cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
  height: calc(8px * var(--gui-scale));
  background: var(--slate-950);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-700);
}

input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: calc(14px * var(--gui-scale));
  height: calc(18px * var(--gui-scale));
  margin-top: calc(-7px * var(--gui-scale));
  background: var(--ember);
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 var(--ember-hi);
}

input[type='range']::-moz-range-track {
  height: calc(8px * var(--gui-scale));
  background: var(--slate-950);
  border: 2px solid var(--ink);
}

input[type='range']::-moz-range-thumb {
  width: calc(12px * var(--gui-scale));
  height: calc(16px * var(--gui-scale));
  border-radius: 0;
  background: var(--ember);
  border: 2px solid var(--ink);
}

.check-row {
  display: flex;
  align-items: center;
  gap: calc(9px * var(--gui-scale));
  font-size: calc(12px * var(--gui-scale));
  color: var(--bone);
  cursor: pointer;
  letter-spacing: 0.06em;
}

.check-row input {
  appearance: none;
  width: calc(16px * var(--gui-scale));
  height: calc(16px * var(--gui-scale));
  background: var(--slate-950);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-600);
  cursor: pointer;
  position: relative;
}

.check-row input:checked {
  background: var(--ember);
  box-shadow: inset 0 0 0 1px var(--ember-hi);
}

/* -------------------------------------------------------------- about -- */

.about-text {
  font-size: calc(12.5px * var(--gui-scale));
  line-height: 1.7;
  color: var(--bone-dim);
  max-width: 100%;
  overflow: hidden;
}

.about-text ul {
  margin: calc(8px * var(--gui-scale)) 0;
  padding-left: calc(18px * var(--gui-scale));
  list-style: none;
}

.about-text li {
  margin: calc(3px * var(--gui-scale)) 0;
  padding-left: calc(14px * var(--gui-scale));
  position: relative;
}

.about-text li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(7px * var(--gui-scale));
  width: calc(4px * var(--gui-scale));
  height: calc(4px * var(--gui-scale));
  background: var(--ember);
}

.world-list {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--gui-scale));
  max-height: calc(300px * var(--gui-scale));
  overflow: auto;
}

.world-entry {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--gui-scale));
  padding: calc(9px * var(--gui-scale)) calc(12px * var(--gui-scale));
  background: var(--slate-850);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-700);
  cursor: pointer;
  transition: background 90ms ease-out;
}

.world-entry:hover {
  background: var(--slate-700);
  box-shadow: inset 0 0 0 1px var(--edge-hi);
}

.world-entry .we-name {
  flex: 1;
  color: var(--bone);
  font-size: calc(13px * var(--gui-scale));
}

.world-entry .we-meta {
  color: var(--bone-dim);
  font-size: calc(11px * var(--gui-scale));
  font-family: ui-monospace, Consolas, monospace;
}

.world-entry .we-actions {
  display: flex;
  gap: calc(6px * var(--gui-scale));
}

.world-list .empty {
  padding: calc(24px * var(--gui-scale));
  text-align: center;
  color: var(--bone-dim);
  font-size: calc(12px * var(--gui-scale));
  border: 2px dashed var(--slate-700);
}

/* ---------------------------------------------------------- inventory -- */

.inventory-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12px * var(--gui-scale));
}

.craft-area,
.furnace-area {
  align-self: stretch;
}

.craft-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14px * var(--gui-scale));
  padding: calc(10px * var(--gui-scale));
  background: var(--slate-850);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-700);
}

.craft-grid {
  display: grid;
  gap: calc(2px * var(--gui-scale));
}

.craft-grid.c2 {
  grid-template-columns: repeat(2, calc(44px * var(--gui-scale)));
}

.craft-grid.c3 {
  grid-template-columns: repeat(3, calc(44px * var(--gui-scale)));
}

.craft-arrow {
  color: var(--ember);
  font-size: calc(20px * var(--gui-scale));
  line-height: 1;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(9, calc(44px * var(--gui-scale)));
  gap: calc(2px * var(--gui-scale));
}

.slot {
  position: relative;
  width: calc(44px * var(--gui-scale));
  height: calc(44px * var(--gui-scale));
  background: var(--slate-950);
  box-shadow:
    inset 2px 2px 0 var(--ink),
    inset -2px -2px 0 var(--slate-700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 80ms ease-out;
}

.slot-grid .slot,
.creative-grid .slot {
  width: 100%;
  max-width: calc(44px * var(--gui-scale));
  height: auto;
  aspect-ratio: 1 / 1;
  min-width: 0;
}

.slot-grid,
.creative-grid {
  justify-items: start;
}

.slot:hover {
  background: var(--slate-800);
  box-shadow:
    inset 2px 2px 0 var(--ink),
    inset -2px -2px 0 var(--edge-hi);
}

.slot.craft-output {
  box-shadow:
    inset 2px 2px 0 var(--ink),
    inset -2px -2px 0 var(--ember-lo);
  background: var(--slate-900);
}

.inventory-main,
.inventory-hotbar {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--gui-scale));
}

.hint {
  color: var(--bone-dim);
  font-size: calc(11px * var(--gui-scale));
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.furnace-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12px * var(--gui-scale));
  padding: calc(10px * var(--gui-scale));
  background: var(--slate-850);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-700);
}

.furnace-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5px * var(--gui-scale));
}

.furnace-flame {
  width: calc(16px * var(--gui-scale));
  height: calc(20px * var(--gui-scale));
  background: var(--slate-700);
  clip-path: polygon(50% 0, 78% 38%, 66% 46%, 88% 72%, 50% 100%, 12% 72%, 34% 46%, 22% 38%);
}

.furnace-flame.lit {
  background: var(--ember);
}

.furnace-progress {
  width: calc(44px * var(--gui-scale));
  height: calc(6px * var(--gui-scale));
  background: var(--slate-950);
  border: 2px solid var(--ink);
}

.furnace-progress i {
  display: block;
  height: 100%;
  background: var(--ember);
  transition: width 180ms linear;
}

.creative-area {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--gui-scale));
}

.creative-tabs {
  display: flex;
  gap: calc(4px * var(--gui-scale));
}

.creative-tabs .seg {
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-600);
  background: var(--slate-850);
}

.creative-tabs .seg.active {
  background: var(--ember-lo);
  box-shadow: inset 0 0 0 1px var(--ember);
}

.creative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, calc(44px * var(--gui-scale)));
  gap: calc(2px * var(--gui-scale));
  max-height: calc(190px * var(--gui-scale));
  overflow: auto;
  padding-right: calc(4px * var(--gui-scale));
}

.drag-stack {
  position: fixed;
  width: calc(40px * var(--gui-scale));
  height: calc(40px * var(--gui-scale));
  pointer-events: none;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
}

/* The tooltip that follows the pointer over an item. */
.item-tooltip {
  position: fixed;
  z-index: 41;
  pointer-events: none;
  padding: calc(6px * var(--gui-scale)) calc(9px * var(--gui-scale));
  background: var(--slate-950);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--slate-600), 0 4px 0 rgba(0, 0, 0, 0.5);
  max-width: calc(230px * var(--gui-scale));
}

.item-tooltip .tt-name {
  color: var(--bone);
  font-size: calc(12px * var(--gui-scale));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: calc(3px * var(--gui-scale));
}

.item-tooltip .tt-sub {
  color: var(--ember-hi);
  font-size: calc(11px * var(--gui-scale));
  font-family: ui-monospace, Consolas, monospace;
}

.item-tooltip .tt-note {
  color: var(--bone-dim);
  font-size: calc(11px * var(--gui-scale));
  margin-top: calc(3px * var(--gui-scale));
}

/* ------------------------------------------------------------ loading -- */

.loading-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14px * var(--gui-scale));
}

.loading-blocks {
  display: flex;
  gap: calc(4px * var(--gui-scale));
}

.loading-blocks span {
  width: calc(12px * var(--gui-scale));
  height: calc(12px * var(--gui-scale));
  background: var(--ember);
  animation: blockHop 900ms infinite ease-in-out;
}

.loading-blocks span:nth-child(2) { animation-delay: 110ms; }
.loading-blocks span:nth-child(3) { animation-delay: 220ms; }
.loading-blocks span:nth-child(4) { animation-delay: 330ms; }
.loading-blocks span:nth-child(5) { animation-delay: 440ms; }

@keyframes blockHop {
  0%, 100% { transform: translateY(0); background: var(--slate-600); }
  40% { transform: translateY(calc(-7px * var(--gui-scale))); background: var(--ember); }
}

/* --------------------------------------------------------- responsive -- */

@media (max-width: 720px) {
  .menu-panel {
    padding: calc(18px * var(--gui-scale)) calc(18px * var(--gui-scale));
  }
  .slider-row {
    grid-template-columns: calc(150px * var(--gui-scale)) 1fr calc(60px * var(--gui-scale));
  }
  .slot-grid,
  .creative-grid {
    grid-template-columns: repeat(6, calc(38px * var(--gui-scale)));
  }
  .inventory-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      'craft'
      'creative'
      'inv'
      'hotbar';
  }
  .hotbar-slot {
    width: calc(34px * var(--gui-scale));
    height: calc(34px * var(--gui-scale));
  }
  .hotbar-selection {
    width: calc(34px * var(--gui-scale));
    height: calc(34px * var(--gui-scale));
  }
  #status-bars {
    width: calc(306px * var(--gui-scale));
  }
}

@media (max-height: 560px) {
  .menu-panel {
    max-height: 96vh;
  }
}