:root {
  --cream: #fff8e7;
  --maple: #c85a17;
  --maple-dark: #8b3a0e;
  --butter: #ffe169;
  --choco: #3e2314;
  --berry: #e63946;
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: #2c1810;
  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  overflow: hidden;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}

.font-display {
  font-family: "Fredoka", "Pretendard", sans-serif;
}

.font-hand {
  font-family: "Gaegu", cursive;
}

/* 440:760 비율을 유지하며 화면에 맞춤 */
#game-wrapper {
  position: relative;
  aspect-ratio: 440 / 760;
  width: min(100vw, calc(100vh * 440 / 760));
  width: min(100vw, calc(100dvh * 440 / 760));
  height: min(100vh, calc(100vw * 760 / 440));
  height: min(100dvh, calc(100vw * 760 / 440));
  margin: auto;
  background: #fffdf7;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.toy-btn {
  background: linear-gradient(180deg, #ffd15c 0%, #f7a823 100%);
  border: 3px solid var(--choco);
  border-radius: 9999px;
  color: var(--choco);
  box-shadow:
    0 5px 0 var(--choco),
    0 8px 15px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}

.toy-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 7px 0 var(--choco),
    0 10px 18px rgba(0, 0, 0, 0.3);
}

.toy-btn:active {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 var(--choco),
    0 3px 6px rgba(0, 0, 0, 0.2);
}

.toy-card {
  background: #fffdf9;
  border: 4px solid var(--choco);
  border-radius: 24px;
  box-shadow:
    0 8px 0 var(--choco),
    0 15px 30px rgba(62, 35, 20, 0.35);
}

.toy-badge {
  background: #fffdf9;
  border: 3px solid var(--choco);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--choco);
}

.creator-credit {
  position: absolute;
  bottom: 5px;
  right: 10px;
  z-index: 30;
  font-family: "Fredoka", "Pretendard", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(230, 213, 184, 0.52);
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
  pointer-events: auto;
}

.creator-credit:hover {
  color: rgba(255, 248, 231, 0.85);
}