/* ===== Mobile-only card placement ===== */
.mobile-like #link-menu-item {
  display: none;
}

.mobile-like .flip-container {
  position: fixed;
  top: 50dvh;
  transform: translateY(-50%);
}

/* Let the front face provide the card's height for exact vertical centering. */
.mobile-like .front {
  position: relative;
}

.mobile-like #copyright {
  position: fixed;
  height: auto;
  margin: 0;
  z-index: 10;
  pointer-events: none;
}

.mobile-like #copyright p {
  margin: 0;
}

/* ===== 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;         /* 可选 */
  }
}