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

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

body {
  font-family: 'Caveat Brush';
  text-align: center;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: #FFD5BF;
}

h1 {
  font-family: 'Luckiest Guy';
  font-size: 11vmin;
  margin-bottom: 2rem;
}

#turn {
  position: absolute;
  bottom: -20vmin; /* adjust to place above steamer */
  left: 50%;
  transform: translateX(-50%);
  font-size: 5vmin;
  font-weight: bold;
  color: #663300;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* TABLE container */
#table {
  position: relative;
  width: 80vmin;
  height: 80vmin;
  display: grid;
  place-items: center;
  
}

/* Message overlay */
#message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 120;
  background: #aa7341de;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 5vmin;
  color: white;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  white-space: normal;
}
.hidden { display: none !important }

#message img {
  display: block;
  margin: 1rem auto 0;   
  max-width: 80%;
  height: auto;
  object-fit: contain;
}

/* Steamer (main board) */
#steamer {
  width: 80vmin;
  height: 80vmin;
  background-image: url("img/steamer.png");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 0;
  animation: float 3s ease-in-out infinite;
}

/* Tic-tac-toe grid inside steamer */
#grille {
  width: 50vmin;
  height: 50vmin;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  z-index: 60;
}

#grille .case {
  border: none;
  background: radial-gradient(
    circle at 50%,  
    rgb(84 52 27 / 50%),  
    rgb(84 52 27 / 50%) 20%,  
    rgba(255,255,255,0) 25% );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.14s;
}

#grille .case:hover {
  transform: translateY(-3%) scale(1.1);
}

/* Decorations */
.decor {
  position: absolute;
  z-index: 55;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.25));
}

#steamer-lid {
  left: -75vmin;
  top: -60vmin;
  width: 85vmin;
  transform: rotate(-20deg);
  z-index: 45;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  animation: rotate-slow 4s ease-in-out infinite alternate;
}

#chopsticks {
  right: -30vmin;
  top: -30vmin;
  width: 40vmin;
  transform: rotate(-30deg);
  animation: float 3.8s ease-in-out infinite;
}

#dumplings {
  bottom: -25vmin;
  right: -20vmin;
  width: 35vmin;
  animation: float 3.2s ease-in-out infinite;
}

#sauce {
  top: 2vmin;
  right: -15vmin;
  width: 20vmin;
  animation: float 4s ease-in-out infinite;
}

#siumai-plate {
  left: -20vmin;
  bottom: -25vmin;
  width: 35vmin;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  animation: float 3.6s ease-in-out infinite;
}

/* Replay button */
.controls {
  margin-top: 2rem;
}

.controls button {
  padding: 1rem 2rem;
  font-size: 4vmin;
  font-family: 'Caveat Brush';
  border: none;
  border-radius: 1rem;
  background-color: #FFB358;
  color: black;
  cursor: pointer;
  transition: background 0.18s;
}

.controls button:hover {
  background-color: #fd9519;
  animation: pulse 0.8s infinite;
}

/* Keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5%); }
}

@keyframes rotate-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(5deg); }
}

@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Responsive */
@media (min-width: 600px) {
  h1 { font-size: 7vmin; }
  #table { width: 72vmin; height: 72vmin; }
  #steamer { width: 60vmin; height: 60vmin; }
  #grille { width: 35vmin; height: 35vmin; }
  #steamer-lid { left: -48vmin; top: -30vmin; width: 60vmin; }
  #chopsticks { right: -18vmin; top: -15vmin; width: 34vmin; }
  #siumai-plate { left: -12vmin; bottom: -15vmin; width: 34vmin; }
  #dumplings { right: -12vmin; bottom: -15vmin; width: 34vmin; }
  #sauce { right: -15vmin; top: 16vmin; width: 18vmin; }
  #turn {font-size: 5vmin;}
}

@media (min-width: 1024px) {
  h1 { font-size: 6vmin; }
  #table { width: 65vmin; height: 65vmin; }
  #steamer { width: 43vmin; height: 43vmin; }
  #grille { width: 24vmin; height: 24vmin; }
  #steamer-lid { left: -35vmin; top: 4vmin; width: 42vmin; }
  #chopsticks { right: -25vmin; top: 15vmin; width: 28vmin; }
  #siumai-plate { left: -4vmin; bottom: 7vmin; width: 20vmin; }
  #dumplings { right: -4vmin; bottom: 7vmin; width: 20vmin; }
  #sauce { right: -5vmin; top: 15vmin; width: 13vmin; }
  #turn { bottom: -1vmin; font-size: 4vmin;}
}