/* ===============================
   RESET / BASE
   =============================== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f4f4f4;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

/* ===============================
   CARD CONTAINER
   =============================== */

#card {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  margin-bottom: 16px;
}

/* ===============================
   TEMPLATE IMAGE
   =============================== */

.game-area {
  width: 94vw;
  max-width: 420px;
  margin: 0 auto;
}

#cardImage {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
}

/* ===============================
   GENERIC TEXT LAYERS
   =============================== */

.layer {
  position: absolute;
  color: #000;
}

/* ===============================
   COMMON ELEMENTS
   =============================== */

.word {
  font-weight: bold;
}

.description {
  font-size: 14px;
}

.forbidden-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ===============================
   BUTTON
   =============================== */

#drawButton {
  width: 100%;

  font-size: clamp(16px, 4.5vw, 20px);
  padding: clamp(12px, 3.5vw, 18px);

  min-height: 48px;
  cursor: pointer;

  border-radius: 12px;
  border: none;
  background-color: #222;
  color: white;
}