* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #0f1923;
  overflow: hidden;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#game-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

#game-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#game-canvas {
  display: block;
  max-width: 480px;
  max-height: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 854;
  object-fit: contain;
  border-radius: 0;
}

/* ==================== Side Panels ==================== */

.side-panel {
  display: none;
}

@media (min-width: 900px) {
  #game-wrapper {
    gap: 0;
  }

  #game-canvas {
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    max-height: calc(100vh - 32px);
  }

  .side-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 160px;
    height: calc(100vh - 32px);
    max-height: 854px;
    padding: 20px 16px;
    flex-shrink: 0;
  }

  .panel-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .panel-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
    margin-bottom: -12px;
  }

  .panel-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(74, 144, 217, 0.7);
    text-transform: uppercase;
    letter-spacing: 3px;
  }

  .panel-section h2 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(160, 195, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .panel-section p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
  }

  /* Controls */
  .control-row {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  .key {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    min-width: 36px;
    text-align: center;
  }

  /* Tips */
  .tip-list {
    list-style: none;
    padding: 0;
  }

  .tip-list li {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.4);
    padding-left: 14px;
    position: relative;
    margin-bottom: 5px;
  }

  .tip-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(74, 144, 217, 0.5);
  }

  /* Scoring rules */
  .score-rule {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
  }

  .rule-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 700;
  }

  .rule-label.perfect { color: rgba(255, 184, 0, 0.85); }
  .rule-label.near { color: rgba(100, 200, 120, 0.75); }
  .rule-label.normal { color: rgba(160, 195, 255, 0.6); }
  .rule-label.miss { color: rgba(230, 80, 80, 0.7); }

  .rule-desc {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
  }

  /* Milestones */
  .milestone-row {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
  }

  .milestone-num {
    font-weight: 700;
    color: rgba(255, 184, 0, 0.7);
    min-width: 24px;
  }

  .milestone-bonus {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    margin-left: auto;
  }

  /* Footer */
  .panel-footer p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
  }
}

/* Wider screens: expand panels */
@media (min-width: 1100px) {
  .side-panel {
    width: 200px;
    padding: 24px 20px;
  }
}

/* Mobile only: no side panels, canvas goes edge-to-edge */
@media (max-width: 899px) {
  #game-wrapper {
    justify-content: center;
    align-items: center;
  }

  #game-canvas {
    max-width: 480px;
    width: 100%;
  }
}

/* Desktop narrow: just canvas with shadow, no panels */
@media (min-width: 481px) and (max-width: 899px) {
  #game-canvas {
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    max-height: calc(100vh - 32px);
  }
}

/* Mobile landscape */
@media (orientation: landscape) and (max-height: 500px) {
  #game-canvas {
    max-height: 100vh;
    width: auto;
  }
}