@media (max-width:768px){
  body{min-height:-webkit-fill-available} html{height:-webkit-fill-available}
  .app-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;flex:1 1 auto;width:100%}
  .canvas-wrap{aspect-ratio:9/16;max-height:100%;height:100%;max-width:100%;width:auto}
  .canvas-wrap #game{width:100%;height:100%;object-fit:contain}
  .hud{font-size:10px;padding:6px 8px}.hud .bar{width:60px}
  .app-header .game-title{width:120px;height:30px}

  /* Styles moved from index.html */
  #title-screen {
    padding: 15px;
  }
  
  #title-content {
    padding: 0 10px;
  }
  
  #title-image {
    width: 90vw;
    max-width: 400px;
    height: auto;
    aspect-ratio: 4/1;
  }
  
  #title-content h2 {
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  #title-content > div > div {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  #title-content > div > div > div {
    margin-bottom: 10px;
  }
  
  #title-content > div > div > div > div {
    width: 48px;
    height: 48px;
  }
  
  #start-button {
    width: 80vw;
    max-width: 300px;
    height: auto;
    aspect-ratio: 2/1;
  }
  
  #title-content > div:last-child {
    margin-bottom: 20px;
  }
  
  .interaction-prompt {
    font-size: 14px;
    padding: 8px 12px;
  }
  
  .interaction-prompt kbd {
    padding: 1px 4px;
    font-size: 12px;
  }
}

@media (max-width:480px){
  .canvas-wrap{aspect-ratio:9/16;max-height:80vh}
  .hud{font-size:9px;padding:4px 6px}

  /* Styles moved from index.html */
  #title-screen {
    padding: 10px;
  }
  
  #title-image {
    width: 95vw;
    max-width: 350px;
  }
  
  #title-content h2 {
    font-size: 18px;
  }
  
  #title-content > div > div {
    gap: 10px;
  }
  
  #title-content > div > div > div > div {
    width: 42px;
    height: 42px;
  }
  
  #start-button {
    width: 85vw;
    max-width: 250px;
  }
}