/* ===== CriAI IDE — Portrait ===== */
@media (orientation: portrait) {
  .ide-sidebar {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 6px;
    left: 0;
    transform: none;
    margin: 0 auto;
    width: fit-content;
    flex-direction: row;
    padding: 5px 10px;
    gap: 4px;
    border-radius: 14px;
  }
  .ide-sidebar.expanded { padding: 5px 10px; align-items: center; }
  .ide-sidebar.expanded .sidebar-icon { width: auto; padding: 0 6px; }
  .sidebar-icon { width: 36px; height: 36px; border-radius: 10px; }
  .sidebar-icon.active::after { right: 50%; bottom: -3px; top: auto; transform: translateX(50%); }
  .sidebar-emoji { font-size: 16px; }
  .sidebar-spacer { display: none; }
  .sidebar-toggle { display: none; }
  .sidebar-popup { bottom: calc(100% + 8px); right: 0; }
  .ide-container { margin-right: 0; margin-bottom: 52px; }
  .ide-explorer { position: absolute; z-index: 20; right: 50px; top: 0; bottom: 22px; width: 200px; box-shadow: -4px 0 16px rgba(0,0,0,0.4); }
  .ide-titlebar .user-info { font-size: var(--fs-xs); }
  .landing-icon { display: none !important; }
  .ide-tabs { min-height: 26px; }
  .ide-tab { height: 26px; padding: 0 0.6rem; font-size: var(--fs-sm); }
  .ide-content { padding: 0.75rem; }
  .ide-btn { padding: 0.4rem 0.7rem; font-size: var(--fs-sm); }
  .ide-input, .ide-select, .ide-textarea { font-size: var(--fs-sm); padding: 0.4rem 0.5rem; }
  .ide-char-card, .char-card, .place-card { flex-direction: column; align-items: stretch; }
  .ide-char-actions, .char-actions, .place-actions { flex-direction: row; }

  /* Vertical carousel */
  .carousel-stage { height: 70vh; perspective: 700px; display: flex; align-items: center; justify-content: center; }
  .carousel-card { width: 280px; }
  .carousel-card[data-pos="0"] { transform: translate(-50%, -50%) rotateX(0) scale(1); }
  .carousel-card[data-pos="-1"] { transform: translate(-50%, calc(-50% - 240px)) rotateX(35deg) scale(0.85); opacity: 0.75; }
  .carousel-card[data-pos="1"] { transform: translate(-50%, calc(-50% + 240px)) rotateX(-35deg) scale(0.85); opacity: 0.75; }
  .carousel-card[data-pos="-2"] { transform: translate(-50%, calc(-50% - 420px)) rotateX(50deg) scale(0.7); opacity: 0.4; }
  .carousel-card[data-pos="2"] { transform: translate(-50%, calc(-50% + 420px)) rotateX(-50deg) scale(0.7); opacity: 0.4; }
  .carousel-nav { top: auto; transform: none; }
  .carousel-nav.prev { top: 0.25rem; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .carousel-nav.next { bottom: 0.25rem; top: auto; left: 50%; transform: translateX(-50%) rotate(90deg); }
  .carousel-wrap { flex-direction: row; }
  .carousel-stage { flex: 1; min-width: 0; }
}