@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
    font-family: "dottonoji", sans-serif;
font-weight: 400;
font-style: normal;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

header {
  text-align: center;
  margin-bottom: 2rem;
}

main{
    padding: 2rem;
    border-radius:20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 300px;
    margin:0 20px
}

#drawButton {
  background-color: #f0f0f0;
  color: rgb(6, 5, 5);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

#drawButton:hover {
 transform:translateY(-3px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 background-color: #bdc0bd;
}

 #drawButton:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#resultDisplay {
font-size: 1.5rem;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 15px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}

footer{
    position: fixed;
    bottom: 20px;
    font-size: 0.9rem;
}


.daikichi {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e) !important;
  color: white;
  border-color: #ff4757;
}

.chuukichi {
  background: linear-gradient(135deg, #ff8e47, #ffcba0) !important;
  color: white;
  border-color: #ffda47;
}

.shoukichi {
  background: linear-gradient(135deg, #c6c203, #fbffa9) !important;
  color: white;
  border-color: #d7ff47;
}

.kichi {
  background: linear-gradient(135deg, #74d821, #c4ff93) !important;
  color: white;
  border-color: #47ff66;
}

.kyou {
  background: linear-gradient(135deg, #1b64f5, #bacefe) !important;
  color: white;
  border-color: #5647ff;
}

/* bodyの背景色変更 */
body.daikichi {
  background: linear-gradient(135deg, #ffe0e0, #fff5f5);
  transition: background 0.5s ease;
}

body.chuukichi {
  background: linear-gradient(135deg, #fff3e0, #fffbf0);
  transition: background 0.5s ease;
}

body.shoukichi {
  background: linear-gradient(135deg, #fffde0, #fffff5);
  transition: background 0.5s ease;
}
body.kichi {
  background: linear-gradient(135deg, #e8f5e8, #f1f8f1);
  transition: background 0.5s ease;
}
body.kyou {
  background: linear-gradient(135deg, #e0eaff, #f5faff);
  transition: background 0.5s ease;
}

/* bodyクラスに基づいたresultDisplayのスタイル */
body.daikichi #resultDisplay {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e) !important;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  border-color: #ff4757;
}

body.chuukichi #resultDisplay {
  background: linear-gradient(135deg, #ffa726, #ffb74d) !important;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  border-color: #ff9800;
}

body.shoukichi #resultDisplay {
  background: linear-gradient(135deg, #c0a50d, #fafc55) !important;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  border-color: #ff9800;
}

body.kichi #resultDisplay {
  background: linear-gradient(135deg, #66bb6a, #81c784) !important;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  border-color: #4caf50;
}

body.kyou #resultDisplay {
  background: linear-gradient(135deg, #1b64f5, #bacefe) !important;
  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  border-color: #5647ff;
}

@media (min-width: 601px) {
  header h1 {
    font-size: 2.5rem;
  }
  
  main {
    margin: 0;
    padding: 3rem;
  }
  
  #drawButton {
    font-size: 1.5rem;
    padding: 15px 40px;
  }
  
  #resultDisplay {
    font-size: 2rem;
  }
}