* {
    box-sizing: border-box;
}

html, body {    
    padding-left: 2px;
    padding-right: 2px;   
    height: var(--app-container-height);    
    background: var(--bg);            
    font-family: "Inter", sans-serif;
    overflow: hidden;
    margin: 0 auto;
}

#app-container {
  height: var(--app-container-height);
  max-width: 600px; /* или другой лимит для десктопа */
  margin: 0 auto;   /* центрирование */  
  overflow: hidden; /* опционально, чтобы не скроллилось горизонтально */
  position: relative; /* чтобы потом абсолютные элементы привязывались к нему */
}

.container {    
    height: var(--container-height);
    overflow: hidden; 
    margin: 0 auto;    
}

.content-section{
    height: var(--container-height);
    width: 100%;
    display: none;
    overflow-y: hidden;    
}

.content-section.active {
    display: block;
}

.btn { 
    background: linear-gradient(180deg, #ffd064, #ffa800); 
    border-radius: var(--border-radius); 
    padding: 5px 10px; 
    font-size: var(--btn-font-size); 
    font-weight: var(--btn-font-weigh); 
    box-shadow: 0 4px 0 #c07c00; 
    border: none; 
    transition: transform 0.1s; 
    cursor: pointer;     
}

.btn:focus {
  outline: none;
}

.btn:active { 
    -webkit-tap-highlight-color: transparent;  /* убирает серый фон на iOS при tap */
    -webkit-touch-callout: none;              /* запрещает системное меню */
    user-select: none;                        /* запрещает выделение текста */
    transform: translateY(2px); 
    box-shadow: 0 2px 0 #c07c00; 
}

.title {
  font-size: clamp(12px, 1rem, 14px);
  font-weight: var(--title-font-weight);

  margin: 5px 0 4px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.2;
  height: 1.2em;

  flex-shrink: 0;
  max-width: 100%;
}