* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #87ceeb;
  font-family: sans-serif;
  user-select: none;
}

#app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

#app canvas {
  display: block;
}

#night-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  padding: 8px 12px;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 700 14px/1 sans-serif;
  cursor: pointer;
}

#night-toggle.off {
  border-color: #9be04a;
  color: #9be04a;
}

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  color: #fff;
  font: 700 28px/28px sans-serif;
  text-align: center;
  text-shadow: 0 0 2px #000;
  pointer-events: none;
  z-index: 2;
}

#overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}

#overlay.hidden {
  display: none;
}

#overlay .brand {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 #000;
}

#overlay .title {
  margin: 0;
  font-size: 22px;
}

#overlay .hint {
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}

#hurt {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: rgba(180, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
}

#hurt.on {
  opacity: 1;
}

#stats {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

#stats-row {
  display: flex;
  gap: 28px;
}

#hearts,
#hunger,
#air {
  display: flex;
  gap: 2px;
}

#air.hidden { display: none; }

.heart,
.food {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid #2a0a0a;
  background: #3a1010;
}

.heart.full { background: #e02323; }
.heart.half { background: linear-gradient(90deg, #e02323 50%, #3a1010 50%); }
.heart.flash { background: #fff; }

.food { border-color: #3a2208; background: #3a2208; }
.food.full { background: #d08020; }
.food.half { background: linear-gradient(90deg, #d08020 50%, #3a2208 50%); }

#water-overlay {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(20, 90, 160, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#water-overlay.on { opacity: 1; }

.bubble {
  width: 14px;
  height: 14px;
  border: 2px solid #1a3a55;
  border-radius: 50%;
  background: transparent;
  box-sizing: border-box;
}
.bubble.full { background: rgba(180, 220, 255, 0.85); }
.bubble.half {
  background: linear-gradient(90deg, rgba(180, 220, 255, 0.85) 50%, transparent 50%);
}

#hotbar {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 4;
  display: flex;
  gap: 4px;
  transform: translateX(-50%);
  padding: 4px;
  background: rgba(0, 0, 0, 0.35);
}

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

#inventory.hidden,
#death.hidden,
#cursor-item.hidden {
  display: none;
}

.panel {
  width: 420px;
  padding: 16px;
  background: rgba(20, 20, 20, 0.92);
  border: 4px solid #3a3a3a;
}

#inv-grid {
  margin-top: 4px;
}

#inv-grid .slot:nth-child(n+28) {
  margin-top: 8px;
}

.craft-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#craft-grid,
#inv-grid {
  display: grid;
  gap: 4px;
}

#craft-grid.two { grid-template-columns: repeat(2, 44px); }
#craft-grid.three { grid-template-columns: repeat(3, 44px); }

#inv-grid { grid-template-columns: repeat(9, 44px); }

.slot .count {
  position: absolute;
  right: 3px;
  bottom: 1px;
  color: #fff;
  font: 700 12px/1 sans-serif;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

#cursor-item {
  position: fixed;
  z-index: 8;
  width: 36px;
  height: 36px;
  pointer-events: none;
}

#death {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(80, 0, 0, 0.55);
  color: #fff;
  font-size: 32px;
}

#save-game,
#respawn,
#death button {
  padding: 10px 16px;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: 700 16px/1 sans-serif;
  cursor: pointer;
}

.slot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 3px solid #222;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.slot.selected {
  border-color: #fff;
}

.swatch {
  display: block;
  width: 100%;
  height: 100%;
}

.swatch.grass {
  background: linear-gradient(#9be04a 0 28%, #6b4423 28% 100%);
}

.swatch.dirt {
  background: #6b4423;
}

.swatch.stone {
  background:
    linear-gradient(#c6c6c6, #c6c6c6),
    repeating-linear-gradient(45deg, #4e4e4e 0 2px, transparent 2px 5px);
  background-blend-mode: multiply;
}

.swatch.wood {
  background: repeating-linear-gradient(90deg, #5c381c 0 4px, #7a4a28 4px 8px, #9a6840 8px 12px);
}

.swatch.leaves {
  background:
    linear-gradient(#2f8f38, #2f8f38),
    repeating-linear-gradient(45deg, transparent 0 4px, rgba(0, 0, 0, 0.25) 4px 6px);
}

.swatch.i1 { background: linear-gradient(#9be04a 32%, #6b4423 32%); }
.swatch.i2 { background: #6b4423; }
.swatch.i3 { background: #8d8d8d; }
.swatch.i4 { background: repeating-linear-gradient(90deg, #5c381c 0 4px, #9a6840 4px 8px); }
.swatch.i5 { background: #2f8f38; }
.swatch.i7 { background: #2a2a2a; }
.swatch.i8 { background: #d8af93; }
.swatch.i9 { background: #c4a05a; }
.swatch.i10 { background: linear-gradient(#8a5a32 40%, #6b4423 40%); }
.swatch.i11 { background: #2f6fbf; }
.swatch.i12 { background: #c43a10; }
.swatch.i13 { background: #e0d08a; }
.swatch.i14 { background: #1a0a28; }
.swatch.i15 { background: #ff2a2a; }
.swatch.i16 { background: linear-gradient(#8d8d8d 55%, #c4a05a 55%); }
.swatch.i17 { background: #3a3a3a; }
.swatch.i18 { background: #fff2a0; }
.swatch.i19 { background: #6b4423; }