/*
=====================================
 スクラッチゲーム

 style.css

 幼児向けUIデザイン

=====================================
*/



/*
=====================================
 基本設定
=====================================
*/


* {

  box-sizing:border-box;

}



body {

  margin:0;


  min-height:100vh;


  background:#fff8ed;



  font-family:

    "Noto Sans JP",

    "Hiragino Sans",

    sans-serif;



  color:#555;



  -webkit-tap-highlight-color:transparent;

}







/*
=====================================
 アプリ全体
=====================================
*/


.app {


  width:100%;


  max-width:600px;


  margin:0 auto;



  padding:20px;



  text-align:center;


}








/*
=====================================
 タイトル
=====================================
*/


.header h1 {


  margin:10px 0;



  color:#ffb703;



  font-size:2rem;



  font-weight:bold;


}





.header p {


  margin:10px 0 25px;



  font-size:1.1rem;



}









/*
=====================================
 アップロードエリア
=====================================
*/


.upload-area {


  display:flex;



  justify-content:center;



  gap:15px;



  margin-top:30px;


}







.upload-button {


  width:180px;



  height:65px;



  display:flex;



  align-items:center;



  justify-content:center;



  background:#74c0fc;



  color:white;



  border-radius:35px;



  font-size:1.1rem;



  font-weight:bold;



  cursor:pointer;



  box-shadow:

    0 5px 12px rgba(0,0,0,0.15);



  transition:

    transform .15s ease;



}






.upload-button:active {


  transform:scale(.95);


}






.upload-button input {


  display:none;


}









/*
=====================================
 ゲームエリア
=====================================
*/


.game-area {


  margin-top:20px;



  padding:20px;



  background:white;



  border-radius:30px;



  box-shadow:

    0 8px 20px rgba(0,0,0,.12);



}








/*
=====================================
 説明
=====================================
*/


#instruction {


  margin:10px;



  color:#ff922b;



  font-size:1.3rem;



  font-weight:bold;



}









/*
=====================================
 Canvas
=====================================
*/


.canvas-container {


  position:relative;



  width:100%;



  max-width:500px;



  aspect-ratio:1 / 1;



  margin:auto;



  overflow:hidden;



  border-radius:25px;



}






canvas {


  position:absolute;



  left:0;



  top:0;



  width:100%;



  height:100%;



  border-radius:25px;



}








#scratchCanvas {


  touch-action:none;



  cursor:pointer;



}









/*
=====================================
 メッセージ
=====================================
*/


.message {


  min-height:45px;



  margin-top:20px;



  font-size:1.4rem;



  font-weight:bold;



  color:#ffb703;



}









/*
=====================================
 ボタンエリア
=====================================
*/


.button-area {


  display:flex;



  justify-content:center;



  gap:15px;



  margin-top:20px;



}








button {


  border:none;



  cursor:pointer;



  padding:15px 30px;



  border-radius:40px;



  font-size:1rem;



  font-weight:bold;



  transition:

    transform .15s ease;



}






button:active {


  transform:scale(.95);


}









/*
=====================================
 もういちど
=====================================
*/


.reset-button {


  background:#4dabf7;



  color:white;



  box-shadow:

    0 5px 10px rgba(0,0,0,.15);



}









/*
=====================================
 写真選択へ戻る
=====================================
*/


.back-button {


  background:#adb5bd;



  color:white;



  box-shadow:

    0 5px 10px rgba(0,0,0,.15);



}









/*
=====================================
 スマホ対応
=====================================
*/


@media(max-width:480px){



  .app {


    padding:15px;


  }





  .header h1 {


    font-size:1.6rem;


  }





  .upload-area {


    flex-direction:column;



    align-items:center;



  }





  .upload-button {


    width:90%;



  }





  .button-area {


    flex-direction:column;



    align-items:center;



  }





  button {


    width:90%;



  }



}