kelompok06-2048/2048_Responsive.css

@media (max-width: 480px) {
  /* Body & Container */
  body {
    padding: 8px;
  }

  .game-container {
    transform: scale(1);
  }

  /* Header */
  .game-header {
    margin-bottom: 16px;
  }

  h1 {
    font-size: clamp(38px, 8vw, 50px);
    margin-bottom: clamp(8px, 1.2vh, 12px);
  }

  .score-container {
    gap: clamp(8px, 1.8vw, 12px);
    margin-bottom: clamp(10px, 1.8vh, 14px);
  }

  .score-box {
    padding: clamp(8px, 1.2vh, 10px) clamp(16px, 2.5vw, 22px);
    min-width: clamp(75px, 10vw, 95px);
  }

  .score-label {
    font-size: clamp(9px, 1.2vw, 11px);
  }

  .score-value {
    font-size: clamp(20px, 2.8vw, 25px);
  }

  /* Top Controls */
  .top-controls {
    top: clamp(8px, 1.5vh, 14px);
    right: clamp(8px, 1.5vw, 14px);
    gap: clamp(6px, 1.2vw, 10px);
  }

  .sound-controls {
    top: clamp(8px, 1.5vh, 14px);
    left: clamp(8px, 1.5vw, 14px);
    gap: clamp(6px, 1.2vw, 10px);
    flex-direction: column;
  }

  .icon-btn {
    width: clamp(32px, 5.5vw, 42px);
    height: clamp(32px, 5.5vw, 42px);
  }

  .icon-btn svg {
    width: clamp(16px, 2.8vw, 22px);
    height: clamp(16px, 2.8vw, 22px);
  }

  .btn-sound {
    width: clamp(32px, 5.5vw, 42px);
    height: clamp(32px, 5.5vw, 42px);
  }

  .btn-sound svg {
    width: clamp(16px, 2.8vw, 22px);
    height: clamp(16px, 2.8vw, 22px);
  }

  /* Board */
  #board {
    max-width: min(90vmin, 100%);
    padding: clamp(8px, 1.8vmin, 14px);
    gap: clamp(5px, 1vmin, 10px);
    border-radius: 16px;
  }

  /* Tiles */
  .tile {
    font-size: clamp(18px, 3.2vmin, 28px);
    border-radius: clamp(6px, 1.5vmin, 12px);
  }

  /* Touch Hint */
  .touch-hint {
    display: block !important;
  }

  /* Tutorial Modal */
  .tutorial-modal {
    padding: 35px 30px;
    max-width: 90%;
  }

  .tutorial-title {
    font-size: 26px;
    margin-bottom: 25px;
  }

  .tutorial-content {
    gap: 25px;
  }

  .tutorial-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  /* PC Controls - Hide on Mobile */
  .pc-controls {
    display: none !important;
  }

  /* Mobile Controls - Show on Mobile */
  .mobile-controls {
    display: block !important;
  }

  .keys-container {
    gap: clamp(15px, 4vw, 30px);
  }

  .keys-separator {
    font-size: clamp(12px, 2vw, 16px);
  }

  .key-box {
    width: clamp(36px, 6vw, 46px);
    height: clamp(36px, 6vw, 46px);
    font-size: clamp(15px, 2.5vw, 20px);
  }

  .key-empty {
    width: clamp(36px, 6vw, 46px);
    height: clamp(36px, 6vw, 46px);
  }

  .keys-label {
    font-size: clamp(11px, 1.6vw, 13px);
  }

  .swipe-icon {
    font-size: 40px;
  }

  .swipe-demo p {
    font-size: 13px;
  }

  .objective-text {
    font-size: 14px;
  }

  .modal-close {
    width: 32px;
    height: 32px;
    top: 12px;
    right: 12px;
  }

  .modal-close svg {
    width: 18px;
    height: 18px;
  }

  /* Game Over Modal */
  .game-over-modal {
    padding: 40px 28px 35px;
    max-width: 90%;
  }

  .game-over-close {
    width: 34px;
    height: 34px;
    top: 14px;
    right: 14px;
  }

  .game-over-close svg {
    width: 18px;
    height: 18px;
  }

  .game-over-title {
    font-size: clamp(28px, 4.5vw, 36px);
    margin-bottom: 10px;
  }

  .game-over-subtitle {
    font-size: 13px;
    margin-bottom: 30px;
  }

  .game-over-score {
    margin-bottom: 32px;
  }

  .game-over-score-label {
    font-size: 10px;
    margin-bottom: 12px;
  }

  .game-over-score-value {
    font-size: clamp(46px, 7.5vw, 60px);
    margin-bottom: 8px;
  }

  .new-high-score {
    padding: 10px 22px;
    font-size: 12px;
    margin-top: 15px;
  }

  .high-score-display {
    margin-top: 24px;
    padding-top: 24px;
  }

  .high-score-label {
    font-size: 10px;
    margin-bottom: 8px;
  }

  .high-score-value {
    font-size: clamp(30px, 4.5vw, 38px);
  }

  .game-over-buttons {
    gap: 10px;
    margin-top: 35px;
  }

  .btn-game-icon {
    width: clamp(62px, 14vw, 72px);
    height: clamp(62px, 14vw, 72px);
    border-radius: 16px;
  }

  .btn-game-icon svg {
    width: clamp(28px, 5.5vw, 34px);
    height: clamp(28px, 5.5vw, 34px);
  }

  /* Sound Control */
  .sound-control-container {
    top: clamp(8px, 1.5vh, 14px);
    left: clamp(8px, 1.5vw, 14px);
    gap: 10px;
  }

  .btn-sound-main {
    width: clamp(36px, 6vw, 46px);
    height: clamp(36px, 6vw, 46px);
  }

  .btn-sound-main svg {
    width: clamp(18px, 3.2vw, 24px);
    height: clamp(18px, 3.2vw, 24px);
  }

  .volume-panel {
    min-width: clamp(200px, 45vw, 240px);
    padding: 16px 14px;
  }

  .volume-item {
    margin-bottom: 14px;
  }

  .volume-label {
    font-size: 12px;
  }

  .volume-value {
    font-size: 11px;
  }

  .volume-icon {
    width: 16px;
    height: 16px;
  }
}