/* ============================================================
   깨알도구
   반짝 공주와 마법정원
   모바일 터치형
   ============================================================ */

.tool-page {
  --tool-page-max-width: 820px;
}

/* ============================================================
   GAME
   ============================================================ */

.princess-game {
  width: 100%;
}

/* ============================================================
   HUD
   ============================================================ */

.princess-hud {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 5px;

  margin-bottom: 8px;
}

.princess-hud > div {
  min-width: 0;

  padding: 8px 3px;

  border: 1px solid #ecdcea;
  border-radius: 11px;

  background: #fff;

  text-align: center;
}

.princess-hud span {
  display: block;

  color: #9d8198;

  font-size: 12px;
  font-weight: 800;
}

.princess-hud strong {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color: #6f566b;

  font-size: 12px;
  font-weight: 900;

  white-space: nowrap;

  text-overflow: ellipsis;

  font-variant-numeric: tabular-nums;
}

/* ============================================================
   PRINCESS SCENE
   ============================================================ */

.princess-scene {
  position: relative;

  display: grid;

  grid-template-columns: 42px 82px 42px;

  align-items: center;
  justify-content: center;

  gap: 4px;

  min-height: 145px;

  padding: 14px 12px;

  overflow: hidden;

  border: 2px solid #efd4e6;
  border-radius: 20px;

  transition: background 0.25s ease;
}

.princess-scene.dress-pink {
  background: linear-gradient(135deg, #fff0f8, #fff9e9);
}

.princess-scene.dress-purple {
  background: linear-gradient(135deg, #f5efff, #fff7fc);
}

.princess-scene.dress-blue {
  background: linear-gradient(135deg, #eaf7ff, #f7f0ff);
}

.princess-scene.dress-yellow {
  background: linear-gradient(135deg, #fff9dc, #fff1f8);
}

.princess-character {
  font-size: 67px;

  line-height: 1;

  text-align: center;

  user-select: none;
}

.scene-decoration {
  font-size: 23px;

  text-align: center;
}

.princess-speech {
  grid-column: 1 / -1;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-top: 3px;

  text-align: center;
}

.princess-speech strong {
  color: #75566e;

  font-size: 12px;
}

.princess-speech span {
  margin-top: 3px;

  color: #9d7894;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.5;
}

/* ============================================================
   PROGRESS
   ============================================================ */

.magic-progress-panel {
  margin-top: 8px;

  padding: 9px 10px;

  border: 1px solid #ecdcea;
  border-radius: 12px;

  background: #fff;
}

.magic-progress-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 6px;

  color: #82667c;

  font-size: 12px;
  font-weight: 800;
}

.magic-progress {
  height: 12px;

  overflow: hidden;

  border-radius: 999px;

  background: #f2e7f0;
}

.magic-progress-bar {
  width: 0%;
  height: 100%;

  border-radius: inherit;

  background: linear-gradient(90deg, #ff90c6, #c88eef, #83d7f4);

  transition: width 0.25s ease;
}

/* ============================================================
   COLLECT AREA
   ============================================================ */

.collect-area {
  margin-top: 10px;

  padding: 12px;

  border: 1px solid #ecdcea;
  border-radius: 17px;

  background: #fff;
}

.collect-area[hidden] {
  display: none;
}

.collect-title {
  margin-bottom: 10px;

  text-align: center;
}

.collect-title strong {
  display: block;

  color: #73586e;

  font-size: 12px;
}

.collect-title span {
  display: block;

  margin-top: 2px;

  color: #a1859c;

  font-size: 12px;
}

/* ============================================================
   MAGIC BOARD
   ============================================================ */

.magic-board {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;
}

.magic-card {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 104px;

  padding: 10px;

  border: 2px solid #efe3ec;
  border-radius: 17px;

  background: linear-gradient(180deg, #ffffff, #fffafd);

  color: #72576d;

  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;
}

.magic-card:active {
  transform: scale(0.97);

  background: #fff2fa;
}

.magic-card .item-icon {
  display: block;

  font-size: 43px;

  line-height: 1;
}

.magic-card .item-name {
  display: block;

  margin-top: 6px;

  font-size: 12px;
  font-weight: 900;
}

.magic-card.good-picked {
  border-color: #f6a8cf;

  background: #fff0f8;
}

.magic-card.cloud-picked {
  border-color: #cad1df;

  background: #f5f7fa;
}

/* ============================================================
   MATH GATE
   ============================================================ */

.math-gate {
  margin-top: 10px;

  padding: 18px 14px;

  border: 2px solid #e4cfef;
  border-radius: 20px;

  background: linear-gradient(145deg, #fbf6ff, #fff8ec);

  text-align: center;
}

.math-gate[hidden] {
  display: none;
}

.math-fairy {
  font-size: 43px;
}

.math-gate-label {
  display: inline-block;

  margin-top: 3px;

  padding: 4px 9px;

  border-radius: 999px;

  background: #eee4fb;

  color: #8065a0;

  font-size: 12px;
  font-weight: 900;
}

.math-gate h2 {
  margin: 8px 0 7px;

  color: #69536b;

  font-size: 14px;
}

.math-question {
  margin: 7px auto 14px;

  color: #543f55;

  font-size: 34px;
  font-weight: 900;

  letter-spacing: 2px;

  font-variant-numeric: tabular-nums;
}

.math-choices {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 8px;

  width: min(100%, 440px);

  margin: 0 auto;
}

.math-choice {
  min-height: 65px;

  border: 2px solid #e2d5e7;
  border-radius: 16px;

  background: #fff;

  color: #6a5067;

  font-size: 24px;
  font-weight: 900;

  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;
}

.math-choice:active {
  transform: scale(0.97);
}

.math-choice.correct {
  border-color: #83c99a;

  background: #eaf8ef;

  color: #3f8256;
}

.math-choice.wrong {
  border-color: #f0adb7;

  background: #fff0f2;

  color: #b85f6b;
}

.math-message {
  min-height: 20px;

  margin: 10px 0 0;

  color: #887184;

  font-size: 12px;
  font-weight: 800;
}

.next-stage-button {
  width: min(100%, 300px);

  min-height: 48px;

  margin-top: 7px;

  border: 0;
  border-radius: 14px;

  background: linear-gradient(135deg, #f78cbc, #a985df);

  color: #fff;

  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
}

.next-stage-button[hidden] {
  display: none;
}

/* ============================================================
   FINISH
   ============================================================ */

.finish-panel {
  margin-top: 10px;

  padding: 22px 15px;

  border: 2px solid #efd3a0;
  border-radius: 20px;

  background: linear-gradient(145deg, #fff8dc, #fff2fa);

  text-align: center;
}

.finish-panel[hidden] {
  display: none;
}

.finish-crown {
  font-size: 52px;
}

.finish-stars {
  margin-top: 2px;

  font-size: 20px;
}

.finish-panel h2 {
  margin: 7px 0 5px;

  color: #73546a;

  font-size: 19px;
}

.finish-panel p {
  margin: 0 auto;

  max-width: 380px;

  color: #96788d;

  font-size: 12px;
  line-height: 1.7;
}

.finish-princess {
  margin: 13px 0 8px;

  font-size: 62px;
}

.finish-result {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 7px 13px;

  border-radius: 999px;

  background: #fff;

  color: #8c6c83;

  font-size: 12px;
}

.finish-result strong {
  color: #cf699e;

  font-size: 16px;
}

.finish-panel button {
  display: block;

  width: min(100%, 300px);

  min-height: 48px;

  margin: 13px auto 0;

  border: 0;
  border-radius: 14px;

  background: linear-gradient(135deg, #ff8fc4, #bd8be8);

  color: #fff;

  font-size: 12px;
  font-weight: 900;

  cursor: pointer;
}

/* ============================================================
   DRESS
   ============================================================ */

.dress-panel {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-top: 10px;

  padding: 9px;

  border: 1px solid #eaddea;
  border-radius: 13px;

  background: #fff;
}

.dress-title {
  color: #80657b;

  font-size: 12px;
  font-weight: 800;
}

.dress-buttons {
  display: flex;

  gap: 5px;
}

.dress-button {
  width: 38px;
  height: 38px;

  padding: 0;

  border: 2px solid transparent;
  border-radius: 50%;

  background: #f8fafc;

  font-size: 17px;

  cursor: pointer;

  touch-action: manipulation;
}

.dress-button.active {
  border-color: #bd83ad;

  background: #fff0f8;
}

/* ============================================================
   BOTTOM
   ============================================================ */

.game-bottom-actions {
  margin-top: 8px;

  text-align: center;
}

.game-bottom-actions button {
  min-height: 38px;

  padding: 0 15px;

  border: 1px solid #e5d9e4;
  border-radius: 10px;

  background: #fff;

  color: #8c7288;

  font-size: 12px;
  font-weight: 800;

  cursor: pointer;
}

/* ============================================================
   GUIDE
   ============================================================ */

.princess-guide {
  margin-top: 24px;

  padding-top: 20px;

  border-top: 1px solid #eadfea;
}

.princess-guide h2 {
  margin: 0 0 10px;

  color: #6f576b;

  font-size: 15px;
}

.princess-guide-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 7px;
}

.princess-guide-grid > div {
  padding: 11px 5px;

  border: 1px solid #eadfea;
  border-radius: 12px;

  background: #fff;

  text-align: center;
}

.princess-guide-grid span {
  display: block;

  font-size: 25px;
}

.princess-guide-grid strong {
  display: block;

  margin-top: 3px;

  color: #72596e;

  font-size: 12px;
}

.princess-guide-grid p {
  margin: 2px 0 0;

  color: #9c8298;

  font-size: 12px;
}

.math-guide {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-top: 9px;

  padding: 10px 12px;

  border-radius: 12px;

  background: #faf5ff;
}

.math-guide span {
  flex: 0 0 auto;

  font-size: 25px;
}

.math-guide p {
  margin: 0;

  color: #846d80;

  font-size: 12px;
  line-height: 1.65;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {
  .princess-hud {
    gap: 3px;
  }

  .princess-hud > div {
    padding: 7px 2px;
  }

  .princess-hud strong {
    font-size: 12px;
  }

  .princess-scene {
    min-height: 132px;

    border-radius: 15px;
  }

  .princess-character {
    font-size: 61px;
  }

  .magic-card {
    min-height: 98px;
  }

  .magic-card .item-icon {
    font-size: 40px;
  }

  .math-question {
    font-size: 31px;
  }

  .math-choice {
    min-height: 62px;

    font-size: 22px;
  }

  .princess-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   VERY SMALL PHONE
   ============================================================ */

@media (max-width: 360px) {
  .magic-card {
    min-height: 90px;

    padding: 7px;
  }

  .magic-card .item-icon {
    font-size: 36px;
  }

  .dress-panel {
    flex-direction: column;

    gap: 5px;
  }
}