* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #243e16;
  font-family: Arial, sans-serif;
  color: #4c4a3b;
  height: 100vh;
  overflow: hidden;
}
button {
  font:
    700 16px Georgia,
    serif;
  cursor: pointer;
}
button:focus-visible {
  outline: 3px solid #fff600;
  outline-offset: 3px;
}
#game {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  top: 0;
  transform: none;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
}
canvas[data-tool]:not(.dragging) {
  cursor: var(--tool-cursor, default);
}
canvas.tool-press:not(.dragging) {
  animation: tool-tap 0.16s ease-out;
}
@keyframes tool-tap {
  50% {
    filter: brightness(1.16);
  }
}
canvas.dragging {
  cursor: grabbing !important;
}
#hud {
  position: absolute;
  left: 1.3%;
  right: 1.3%;
  top: 1.5%;
  display: flex;
  align-items: center;
  gap: 1%;
  pointer-events: none;
}
#hud > * {
  pointer-events: auto;
}
.profile,
.level,
.money,
#hud > button {
  border: 2px solid #83552a;
  background: linear-gradient(#fff8d5, #e7cd8a);
  border-radius: 8px;
  box-shadow: 0 2px 3px #233a2455;
  min-height: 45px;
}
.profile {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 5px 12px 5px 5px;
}
.profile b {
  font: 700 17px Georgia;
}
.profile small {
  display: block;
  font-size: 10px;
  margin-top: 4px;
}
.portrait {
  background: #85b63d;
  border: 2px solid #fff0be;
  color: white;
  font: bold 26px Georgia;
  padding: 4px 10px;
  border-radius: 6px;
}
.level {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 5px;
}
.level strong {
  border: 2px solid #9e7532;
  border-radius: 50%;
  padding: 6px 10px;
  background: #e9b942;
  font: bold 24px Georgia;
  color: #fff9d7;
  text-shadow: 1px 1px #755525;
}
.level b,
.level small {
  font-size: 11px;
}
.xpbar {
  width: 100px;
  height: 8px;
  background: #795e31;
  border-radius: 9px;
  margin: 3px 0;
  overflow: hidden;
}
.xpbar i {
  display: block;
  height: 100%;
  background: #83c849;
}
.money {
  padding: 12px 18px;
  font-size: 20px;
}
.money span {
  color: #ffdb16;
  text-shadow: 1px 1px #9d650a;
  margin-right: 9px;
}
#hud > button {
  padding: 8px 16px;
  color: #5d472c;
}
#hud > button:first-of-type {
  margin-left: auto;
}
#toolbar {
  position: absolute;
  left: 26%;
  bottom: 0.8%;
  width: 48%;
  height: 11.7%;
  display: flex;
  background: #1d4e09e8;
  border-radius: 22px;
  border: 2px solid #73952b77;
  box-shadow: inset 0 1px 12px #0e3306;
}
#toolbar button {
  width: 14.285%;
  border: 0;
  background: transparent;
  border-radius: 16px;
  padding: 1%;
  position: relative;
}
#toolbar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
}
#toolbar button.active {
  background: #b7de5d44;
  box-shadow: inset 0 0 16px #dcff6b;
}
#toolbar button:hover {
  background: #c7f77933;
}
#toolbar button small {
  display: none;
}
#toolHint {
  position: absolute;
  bottom: 13%;
  left: 32%;
  width: 36%;
  text-align: center;
  font: 14px Georgia;
  color: #fffed5;
  text-shadow: 1px 2px 2px #285109;
  pointer-events: none;
}
#save {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: #ecffd4;
  font-size: 11px;
  text-shadow: 1px 1px #315721;
}
#helpOpen {
  position: absolute;
  right: 2%;
  bottom: 4%;
  border: 2px solid #eee;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #dbe9b5;
  color: #667a47;
}
#status {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 24px;
  background: #284d13d9;
  color: #fff6ce;
  border-radius: 20px;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.4s;
}
#tooltip {
  position: absolute;
  pointer-events: none;
  background: #fff7dcef;
  border: 2px solid #998252;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 13px;
  max-width: 240px;
  box-shadow: 1px 3px 8px #0004;
}
dialog {
  position: absolute;
  inset: 0;
  width: 76%;
  max-width: 980px;
  height: 78%;
  max-height: 650px;
  background: #f4f4f4;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 5px 25px #26362088;
  color: #555;
}
dialog::backdrop {
  background: #18390055;
}
.title {
  height: 44px;
  text-align: center;
  border-bottom: 2px solid #ddd;
  font: bold 26px Georgia;
  position: relative;
  padding: 6px;
}
.title button {
  position: absolute;
  right: 12px;
  top: 0;
  background: none;
  border: 0;
  color: #777;
  font: 40px Arial;
}
#windowBody {
  height: calc(100% - 44px);
  padding: 12px 20px;
  overflow: auto;
}
.tabs {
  display: flex;
  gap: 6px;
  padding: 0 4px;
}
.tabs button {
  border: 0;
  border-radius: 7px 7px 0 0;
  padding: 12px 20px;
  color: #666;
  background: #bbc3c8;
}
.tabs button.selected {
  background: white;
  color: #444;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: white;
  border: 2px solid #ddd;
  border-radius: 9px;
  padding: 14px 5px;
  gap: 12px;
  min-height: 70%;
}
.seed {
  background: white;
  text-align: center;
  border: 0;
  padding: 5px;
  color: #555;
  position: relative;
}
.seed img {
  height: 105px;
  width: 100%;
  object-fit: contain;
}
.seed b {
  display: block;
  font: 16px Georgia;
  margin: 4px;
}
.seed span {
  font: 700 17px Arial;
  display: block;
}
.gold {
  color: #dba900;
}
.seed small {
  display: block;
  font: 11px Arial;
  color: #888;
  line-height: 1.5;
  margin-top: 6px;
}
.seed:hover {
  background: #fcf8e6;
  border-radius: 8px;
}
.seed:disabled {
  opacity: 0.4;
  cursor: default;
}
.window-note {
  font: 12px Arial;
  margin: 12px 5px;
  color: #888;
}
.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.item {
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  text-align: center;
  padding: 12px;
}
.item img {
  height: 80px;
  max-width: 100%;
  object-fit: contain;
}
.item button,
.classic-button {
  display: block;
  margin: 12px auto 0;
  border: 1px solid #8d7e55;
  border-radius: 5px;
  background: linear-gradient(#fffde9, #dcc99c);
  padding: 8px 20px;
  color: #655536;
}
.empty {
  text-align: center;
  padding: 50px 15px;
  font: 18px Georgia;
}
.help {
  line-height: 1.8;
  font-size: 15px;
}
.help b {
  color: #57782d;
}
@media (max-width: 900px) {
  #hud {
    transform: scale(0.75);
    transform-origin: top left;
    width: 130%;
  }
  #status {
    font-size: 11px;
    padding: 5px 12px;
  }
  #toolHint {
    font-size: 11px;
  }
  .seed img {
    height: 65px;
  }
  .tabs button {
    padding: 8px;
    font-size: 12px;
  }
  .seed b {
    font-size: 12px;
  }
  .seed small {
    font-size: 9px;
  }
  .title {
    font-size: 20px;
  }
  .shop-grid {
    gap: 2px;
  }
  .window-note {
    font-size: 10px;
  }
}