:root {
  --slot: 58px;
  --ink: #f4f4f4;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #6b5130;
  font-family: "DejaVu Sans", sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  background: #87b6ff;
}

#vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.28) 100%);
  z-index: 2;
}

#title-wrap {
  pointer-events: none;
  position: fixed;
  top: 4.5vh;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  opacity: 0;
}

#title-wrap.show {
  animation: logoOut 4.8s ease forwards;
}

#title, .load-logo, .pause-title {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #e7e7e7;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #b5b5b5,
    0 3px 0 #8d8d8d,
    3px 5px 0 #3a3a3a,
    5px 7px 0 #1a1a1a;
}

#title {
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1;
}

#edition {
  margin-top: 10px;
  color: #ffe45c;
  letter-spacing: 0.42em;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 2px 2px 0 #3d3a10;
}

@keyframes logoOut {
  0%, 45% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}

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

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(#fff, #fff) center / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) center / 18px 2px no-repeat;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}

#help {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: min(460px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.38);
  border: 2px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-shadow: 1px 1px 0 #000;
  transition: opacity 0.8s ease;
}

#help.faded { opacity: 0; }

#help b {
  font-size: 14px;
  letter-spacing: 0.04em;
}

#debug {
  position: absolute;
  top: 14px;
  left: 14px;
  margin: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: "DejaVu Sans Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  text-shadow: 1px 1px 0 #000;
  white-space: pre;
}

#flybadge {
  position: absolute;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffe56a;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  text-shadow: 1px 1px 0 #000;
  border: 2px solid rgba(255, 229, 106, 0.45);
}

#blockname {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 2px 2px 0 #222, -1px -1px 0 #222;
  min-height: 1.2em;
}

#breakbar {
  position: absolute;
  left: 50%;
  top: calc(50% + 22px);
  width: 86px;
  height: 8px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #111;
  box-shadow: inset 0 0 0 1px #888;
}

#breakbar > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(#fff36a, #e3a514);
}

#hotbar {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid #1b1b1b;
  box-shadow:
    inset 0 0 0 2px #d7d7d7,
    inset 0 0 0 4px #8b8b8b,
    0 4px 0 rgba(0, 0, 0, 0.25);
}

.slot {
  pointer-events: auto;
  cursor: pointer;
  position: relative;
  width: var(--slot);
  height: var(--slot);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
    rgba(0, 0, 0, 0.45);
  border: 2px solid #2a2a2a;
  box-shadow: inset 0 0 0 2px #8d8d8d;
}

.slot.selected {
  border-color: #fff;
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 0 2px #000;
  transform: translateY(-3px);
}

.slot img {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  image-rendering: auto;
  pointer-events: none;
}

.slot .num {
  position: absolute;
  left: 3px;
  top: 1px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
}

#hint {
  position: absolute;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  text-shadow: 1px 1px 0 #000;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

body.playing #hint { display: none; }
body.playing #blockname { display: block; }
body:not(.playing) #blockname { display: none; }

#version {
  position: absolute;
  right: 12px;
  bottom: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  text-shadow: 1px 1px 0 #000;
}

#pause {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

#pause[hidden] { display: none; }

.panel {
  pointer-events: auto;
  min-width: min(420px, calc(100vw - 32px));
  padding: 28px 28px 22px;
  background: rgba(18, 18, 18, 0.82);
  border: 4px solid #0a0a0a;
  box-shadow: inset 0 0 0 3px #c6c6c6, inset 0 0 0 6px #555;
  text-align: center;
  color: #fff;
}

.pause-title {
  font-size: 42px;
  margin-bottom: 18px;
}

.panel button {
  pointer-events: auto;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(#6d6d6d, #4a4a4a);
  border: 3px solid #1a1a1a;
  box-shadow: inset 0 0 0 2px #bdbdbd, inset 0 0 0 4px #6a6a6a;
  padding: 10px 28px;
  cursor: pointer;
  text-shadow: 2px 2px 0 #222;
}

.panel button:hover { filter: brightness(1.12); }
.panel p {
  margin: 14px 0 0;
  color: #ddd;
  font-size: 13px;
  text-shadow: 1px 1px 0 #000;
}

#loading {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 40%),
    repeating-linear-gradient(0deg, #6a4b2c 0 8px, #5d4126 8px 16px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 8px, transparent 8px 16px);
}

#loading[hidden] { display: none; }

.load-card { text-align: center; width: min(460px, calc(100vw - 32px)); }
.load-logo { font-size: clamp(36px, 8vw, 68px); }
.load-sub {
  margin: 8px 0 18px;
  color: #ffe45c;
  letter-spacing: 0.28em;
  font-weight: 700;
  text-shadow: 2px 2px 0 #3a3208;
}

#loadbar {
  height: 14px;
  background: #1a1a1a;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px #888;
}

#loadfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(#8ee04a, #3d8f14);
}

#loadtext {
  margin-top: 10px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
  font-size: 14px;
}

#fatal {
  position: fixed;
  z-index: 9;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 12px 14px;
  background: #3a1010;
  color: #fff;
  border: 2px solid #ffb4b4;
  font-family: "DejaVu Sans Mono", monospace;
  white-space: pre-wrap;
}

#fatal[hidden] { display: none; }

@media (max-width: 720px) {
  :root { --slot: 42px; }
  .slot img { width: 34px; height: 34px; }
  #help { font-size: 11px; }
  #edition { letter-spacing: 0.18em; }
}