body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
  }

  button {
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: bold;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transition: background-color 0.2s, transform 0.1s;
  }

  #resetBtn { background-color: #e53935; color: white; border: none; }
  #resetBtn:hover { background-color: #c62828; }
  #resetBtn:active { transform: scale(0.96); }

  #sortBtn { background-color: #43a047; color: white; border: none; }
  #sortBtn:hover { background-color: #2e7d32; }
  #sortBtn:active { transform: scale(0.96); }

  #stepBtn { background-color: #757575; color: white; border: none; }
  #stepBtn:hover { background-color: #616161; }
  #stepBtn:active { transform: scale(0.96); }

  #prevBtn, #nextBtn, .nav-btn {
    background-color: #757575; color: white; border: none;
  }
  #prevBtn:hover, #nextBtn:hover, .nav-btn:hover { background-color: #616161; }
  #prevBtn:active, #nextBtn:active, .nav-btn:active { transform: scale(0.96); }

  header {
    background-color: #444; color: white; padding: 40px 0 10px;
    display: flex; justify-content: space-between; align-items: center; position: relative;
  }
  .logo { display: flex; align-items: center; margin-left: 20px; }
  .logo img { height: 60px; margin-right: 20px; }
  .logo h1 { font-size: 32px; margin: 0; color: #ccc; }

  .language-switcher { position: absolute; bottom: 5px; right: 10px; font-size: 20px; }
  .language-switcher a { color: #fcfcfc; text-decoration: none; margin: 0 5px; }
  .language-switcher a.active { font-weight: bold; text-decoration: underline; }

  main { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 20px; gap: 20px; }
  .left-section { flex: 1; max-width: 350px; display: flex; flex-direction: column; gap: 10px; margin-left: 100px; }
  .right-section { flex: 1; max-width: 700px; display: flex; flex-direction: column; align-items: center; padding: 0 3px; gap: 20px; min-width: 520px; overflow: hidden; }

  .info-box, .dark-box { border-radius: 10px; padding: 15px; text-align: left; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
  .info-box { background-color: #fff; }
  .info-box h2 { margin-top: 0; }
  .dark-box { background-color: #444; color: #fff; }

  canvas {
    background-color: #fff; margin: 0 auto 20px; display: block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); cursor: pointer; width: 600px; height: 400px;
  }

  .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-bottom: 5px; }
  select, button { padding: 10px 15px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; background-color: white; cursor: pointer; }
  button:hover { background-color: #f0f0f0; }
  button.action-btn { background-color: #e00; color: white; border: none; }
  button.action-btn:hover { background-color: #c00; }
  button.step-btn { background-color: #666; color: white; border: none; }
  button.step-btn:hover { background-color: #555; }

  #phaseInfo { margin: 10px auto; padding: 5px; background-color: #e0f0f0; border-radius: 5px; max-width: 500px; text-align: center; }

  .stats-bar {
    background-color: #9c27b0; color: white; padding: 10px;
    border-radius: 5px; margin-top: 10px; text-align: center;
  }

  footer { background-color: #444; color: white; text-align: center; padding: 20px 0; margin-top: 20px; }
  footer img { height: 80px; margin: 10px; }

  .phase-navigation {
    display: none; flex-direction: column; align-items: center; justify-content: center;
    margin: 5px 0; gap: 10px; width: 100%; box-sizing: border-box; overflow: hidden; padding: 6px 8px;
  }
  .phase-navigation-row {
    display: flex; justify-content: center; align-items: center; width: 100%;
    gap: 6px;
  }

  #phase-buttons {
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    gap: 6px; transform-origin: center;
  }

  .nav-btn, .phase-btn { margin: 0; }
  .nav-btn {
    width: 40px; height: 40px; font-size: 20px; cursor: pointer;
    background-color: #eee; border: 1px solid #bbb; border-radius: 5px;
    display: flex; justify-content: center; align-items: center; flex-shrink: 0;
  }
  .phase-btn {
    flex: 0 0 auto; width: 36px; height: 40px; border-radius: 5px; font-size: 16px; cursor: pointer;
    background-color: #fff; border: 1px solid #ccc; text-align: center; line-height: 40px; white-space: nowrap;
  }
  .phase-btn:hover { background-color: #f0f0f0; }
  .phase-btn.active { background-color: #35a; color: white; border: none; }

  .nowrap-pair-left { display: inline-flex; align-items: center; gap: 6px; }
  .nowrap-pair { display: inline-flex; align-items: center; gap: 6px; }

  /* Responsive */
  @media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  main {
    flex-direction: column;
    align-items: center;    /
  }

  .left-section {
    order: 1;         
    margin-left: 0; 
    max-width: 100%;
  }

  .right-section {
    order: 2;         
    min-width: 0; 
    max-width: 100%;
    padding: 0;
  }

  canvas {
    max-width: 100%;
    height: auto;
  }

  .phase-navigation {
    width: 100%;
  }
}