* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #ff4b0b 50%, #9dceff 50%);
  color: #17212d;
  font-family: Arial, Helvetica, sans-serif, sans-serif;
}
main { position: relative; z-index: 1; text-align: center; padding: 28px 16px; }
.intro { font-size: 20px; font-weight: bold; letter-spacing: 3px; }
h1 { margin: 12px 0; font: bold clamp(80px, 7vw, 80px) Georgia, serif; }
h1 span { font-size: .55em; }
#status { min-height: 28px; font-size: 35px; font-weight: bold; }
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: min(82vw, 500px);
  margin: 22px auto;
  padding: 8px;
  background: #515250;
  border: 3px solid #8a8d85;
  box-shadow: 0 12px 28px #17212d40;
}
.cell {
  position: relative;
  aspect-ratio: 1;
  border: 2px outset #efefea;
  background: #deded8;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.cell:focus-visible, #reset:focus-visible { outline: 4px solid #17212d; outline-offset: 3px; }
.cell:disabled { cursor: default; opacity: 1; }
.icon, .cell:empty:not(:disabled)::after {
  display: block;
  font-size: clamp(35px, 11vw, 68px);
  line-height: 1;
}

.cell:empty:not(:disabled):is(:hover, :focus-visible) { transform: scale(1.04); background: #fff6e8; }
.cell:empty:not(:disabled):is(:hover, :focus-visible)::after { content: '🔥' ; animation: preview .8s; }
body[data-player="glace"] .cell:empty:not(:disabled):is(:hover, :focus-visible)::after { content: ''; color: #2486bd; }
body[data-player="glace"] .cell:empty:not(:disabled):is(:hover, :focus-visible)::after { content: '❄'; color: #2486bd; }
.feu { background: radial-gradient(circle, #ffdb10, #ff8d40, rgb(255, 62, 62)); }
.glace { background: linear-gradient(135deg, #f4ffff, #86c9f2, #dffaff); }
.glace .icon { color: #efffff; font-weight: bold; text-shadow: 2px 3px #4f95bb, 0 0 10px white; }
.feu .icon { animation: place-fire 1s ease-out;   filter: contrast(3.5) brightness(1.1);}
.glace .icon { animation: place-ice 1s ease-out; }
.winner { z-index: 2; animation: celebrate .8s infinite alternate; }
#reset { padding: 11px 24px; border: 2px solid #17212d; border-radius: 4px; background: #fff9ee; color: #17212d; font-weight: bold; cursor: pointer; }
#reset:hover { background: white; }
.hint { font-size: 13px; }
.effects { position: fixed; inset: 0; pointer-events: none; }
body.fire-win { background: #ff4b0b; }
.fire-win .effects {
  background: radial-gradient(ellipse at bottom, #fff39a 0%, #ffb018 25%, transparent 65%);
  box-shadow: inset 0 0 100px 35px #ffda36;
  animation: heat .7s infinite alternate;
}
.fire-win .effects::before, .fire-win .effects::after {
  content: '🔥 🔥 🔥 🔥 🔥'; position: absolute; left: 0; width: 100%;
  bottom: -25px; font-size: clamp(55px, 13vw, 170px); text-align: center;
  animation: flames 1s infinite alternate;
}
.fire-win .effects::after { top: -25px; bottom: auto; transform: rotate(180deg); }
body.ice-win { background: #99cffa; }
.ice-win .effects {
  background: repeating-linear-gradient(125deg, transparent 0 85px, #ffffff70 86px, transparent 88px 160px);
  box-shadow: inset 0 0 75px 35px #efffff;
  animation: frost 1.5s ease-out;
}
.ice-win .effects::after {
  content: '❄ ❄ ❄ ❄ ❄'; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: min(95vw, 90vh); color: #ffffff40; animation: freeze 2s infinite alternate;
}
.resetting .icon { animation: disappear .8s forwards; }
@keyframes preview { to { opacity: .8; transform: scale(1.1); } }
@keyframes place-fire { from { transform: scale(.2) rotate(-20deg); } 70% { transform: scale(1.2); } to { transform: scale(1); } }
@keyframes place-ice { from { transform: scale(1.6) rotate(35deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes celebrate { to { transform: scale(1.07); box-shadow: 0 0 20px #fff; } }
@keyframes heat { to { box-shadow: inset 0 0 130px 55px #ffed77; } }
@keyframes flames { to { translate: 0 -20px; } }
@keyframes frost { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
@keyframes freeze { to { opacity: .5; } }
@keyframes disappear { to { opacity: 0; transform: scale(.3) rotate(20deg); } }