:root {
  --ink: #2a1b14;
  --panel: rgba(255, 252, 237, 0.78);
  --panel-strong: rgba(255, 250, 220, 0.94);
  --leaf: #4f9c44;
  --sky: #72cfef;
  --sun: #ffd768;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(255, 249, 202, 0.62), rgba(111, 204, 226, 0.22)),
    radial-gradient(circle at 16% 16%, rgba(255, 239, 138, 0.8), transparent 28%),
    linear-gradient(135deg, #b7edf6 0%, #f8e88f 46%, #8fd066 100%);
  color: var(--ink);
  display: flex;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  justify-content: center;
  overflow: hidden;
}

.stage-shell {
  display: grid;
  height: 100%;
  padding: clamp(10px, 2vw, 28px);
  place-items: center;
  width: 100%;
}

.game-stage {
  aspect-ratio: 16 / 9;
  border: 3px solid rgba(59, 82, 34, 0.38);
  border-radius: 8px;
  box-shadow: 0 24px 58px rgba(45, 88, 65, 0.25);
  max-height: calc(100vh - 20px);
  max-width: min(1280px, calc(100vw - 20px));
  overflow: hidden;
  position: relative;
  width: 100%;
}

canvas {
  display: block;
  height: 100%;
  image-rendering: auto;
  touch-action: none;
  width: 100%;
}

.topbar {
  align-items: center;
  display: flex;
  gap: 10px;
  left: clamp(10px, 2vw, 22px);
  position: absolute;
  right: clamp(10px, 2vw, 22px);
  top: clamp(10px, 2vw, 18px);
}

.badge,
button {
  backdrop-filter: blur(8px);
  background: var(--panel);
  border: 2px solid rgba(66, 88, 38, 0.22);
  border-radius: 8px;
  box-shadow: 0 5px 0 rgba(95, 79, 31, 0.18);
}

.badge {
  min-width: 110px;
  padding: 8px 12px;
}

.label {
  display: block;
  font-size: 12px;
  line-height: 1;
  opacity: 0.68;
}

.badge strong {
  display: block;
  font-size: clamp(15px, 2vw, 21px);
  line-height: 1.1;
  margin-top: 4px;
  white-space: nowrap;
}

button {
  color: var(--ink);
  cursor: pointer;
  font: 700 17px/1 "Trebuchet MS", "Verdana", sans-serif;
  margin-left: auto;
  padding: 13px 18px 12px;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

button:hover {
  background: var(--panel-strong);
  transform: translateY(-1px);
}

button:active {
  box-shadow: 0 2px 0 rgba(95, 79, 31, 0.18);
  transform: translateY(3px);
}

@media (max-width: 620px) {
  .stage-shell {
    padding: 6px;
  }

  .game-stage {
    max-height: calc(100vh - 12px);
    max-width: calc(100vw - 12px);
  }

  .topbar {
    gap: 6px;
    left: 8px;
    right: 8px;
    top: 8px;
  }

  .badge {
    min-width: 62px;
    padding: 5px 7px;
  }

  .label {
    font-size: 9px;
  }

  .badge strong {
    font-size: 13px;
  }

  button {
    font-size: 13px;
    padding: 9px 10px;
  }
}