/* 控制不同螢幕寬度下的調整 */

/* 平板 */
@media (max-width: 900px) {
  .game-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-actions {
    width: 100%;
  }

  .toolbar-button {
    flex: 1;
  }

  .primary-button {
    margin-top: 20px;
    margin-bottom: 15px;
  }

  .game-scene {
    padding: 20px;
  }

  .guide-layout {
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .character-placeholder {
    min-height: 130px;
  }

  .answer-options {
    grid-template-columns: 1fr;
  }

  .mission-panel {
    padding: 24px;
  }

  .opening-character-area {
    right: -50px;
    bottom: -80px;

    width: clamp(
      170px,
      34vw,
      230px
    );
  }
}

/* 小型平板與手機 */
@media (max-width: 760px) {
  .opening-panel {
    padding:
      var(--space-5)
      var(--space-4);
  }

  .opening-visual {
    margin-bottom:
      var(--space-10);
  }

  .opening-character-area {
    right: -33px;
    bottom: -56px;

    width: clamp(
      150px,
      34vw,
      205px
    );
  }

  .opening-dialogue {
    margin-top:
      var(--space-9);
  }

  .dialogue-box {
    margin-top: 10px;
    margin-bottom: 2px;
    padding: 22px 28px;
    line-height: 1.85;
  }

  .badge-book {
    margin-bottom: 3px;
    padding: var(--space-5);
  }

  .badge-book-heading {
    align-items: flex-end;
    flex-direction: row;
    gap: var(--space-2);
  }

  .badge-book-stage {
    overflow: visible;
  }

  .badge-book-background {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    pointer-events: none;
  }

  .badge-book-slots {
    position: absolute;
    inset: 0;

    pointer-events: none;
  }

  .badge-book-slot {
    position: absolute;

    width: clamp(
      70px,
      13vw,
      145px
    );

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

    transform: translate(-50%, -50%);
  }

    /* 第一枚：左上 */
  .badge-book-slot:nth-child(1) {
    left: 30.25%;
    top: 35%;
  } 

  /* 第二枚：中上 */
  .badge-book-slot:nth-child(2) {
    left: 50%;
    top: 35%;
  }

  /* 第三枚：右上 */
  .badge-book-slot:nth-child(3) {
    left: 69.7%;
    top: 35%;
  }

  /* 第四枚：左下 */
  .badge-book-slot:nth-child(4) {
    left: 39.9%;
    top: 67%;
  }

  /* 第五枚：右下 */
  .badge-book-slot:nth-child(5) {
    left: 60%;
    top: 67%;
  }

  .badge-book-image-frame {
    width: clamp(
      58px,
      9vw,
      105px
    );

    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .badge-book-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
  }

  .answer-result-reward {
    width: 100%;
    margin: 0 auto -15px;

    grid-template-columns:
      minmax(90px, 0.8fr)
      minmax(180px, 1.2fr);

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

    gap: 0px;
  }

  .answer-result-guide {
    position: relative;
    min-height: auto;

    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .answer-result-guide img {
    width: clamp(
      110px,
      32vw,
      170px
    );

    max-width: 100%;
  }

  .answer-result-badge-image {
    width: clamp(
      150px,
      48vw,
      220px
    );

    max-width: 100%;
  }

  .feedback-dialogue {
    margin-top: 36px;
    padding: 22px 28px;
  }

  .certificate-results {
    grid-template-columns: 1fr;
  }

  .certificate-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* 手機 */
@media (max-width: 600px) {
  .opening-character-area {
    right: -17.5px;
    bottom: -56px;

    width: clamp(
      150px,
      34vw,
      195px
    );
  }

  .toolbar-actions {
    flex-direction: column;
  }

  .game-status {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
  }

  .status-item {
    min-width: 0;
  }

  .score-status {
    white-space: nowrap;
  }

  .opening-panel h1 {
    font-size: 1.8rem;
  }

  .question-card {
    padding: 20px;
  }

  .system-restored-animation {
    gap: 12px;
    font-size: 2rem;
  }

  .restored-center {
    font-size: 3.5rem;
  }
}

/* 小型手機 */
@media (max-width: 480px) {
  .final-panel {
    padding: 22px;
  }

  .mission-certificate {
    padding: 24px 18px;
  }
}