/* ===== Portrait: Small phones (<=600px) ===== */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #guess { width: 400px; height: 30px; }

  .flip-container {
    width: var(--card-width-sm);
    left: calc(50% - (var(--card-width-sm) / 2));
    z-index: 10;
  }

  /* 小屏依旧隐藏背面 */
  .back { visibility: hidden; }

  html, body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Portrait: >=601px ===== */
@media only screen and (min-width: 601px) and (orientation: portrait) {
  #guess { width: 420px; height: 20px; }

  .flip-container {
    width: var(--card-width-md);
    left: calc(50% - (var(--card-width-md) / 2));
    z-index: 10;
  }

  /* 竖屏隐藏背面 */
  .back { visibility: hidden; }
}

/* ===== Landscape: >=900px ===== */
@media only screen and (min-width: 900px) and (orientation: landscape) {
  #guess { width: 460px; height: 25px; }

  .flip-container {
    width: var(--card-width-lg);
    left: calc(50% - (var(--card-width-lg) / 2));
    z-index: 10;
  }
}

/* ===== Landscape: <900px ===== */
@media only screen and (max-width: 899px) and (orientation: landscape) {
  #guess { width: 460px; height: 25px; }

  .flip-container {
    width: var(--card-width-lg);
    left: calc(50% - (var(--card-width-lg) / 2));
    z-index: 10;
  }
}


/* === Mobile: restore padding for the command box === */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #terminal {
    padding: 12px 16px;        /* 恢复内边距 */
    border-radius: 12px;       /* 可选：更柔和一点 */
    background: white;         /* 可选：避免贴边时透出底纹 */
  }
}

@media only screen and (min-width: 601px) and (max-width: 820px) and (orientation: portrait) {
  #terminal {
    padding: 12px 20px;
    border-radius: 12px;       /* 可选 */
    background: white;         /* 可选 */
  }
}

/* 小屏横屏也补一下（可选） */
@media only screen and (max-width: 899px) and (orientation: landscape) {
  #terminal {
    padding: 10px 16px;
    border-radius: 12px;       /* 可选 */
    background: white;         /* 可选 */
  }
}