/* Wordle — game-specific styles (rides on playful.css) */

:root {
  --color-correct:#5EE882; --color-partial:#FFD43B; --color-absent:#A0A0A0; --color-empty:#FFFFFF;
}

body.playful { touch-action:none; }

.game-container {
  width:100%; max-width:500px; height:100dvh; margin:0 auto;
  display:flex; flex-direction:column; padding:18px 10px;
}

.main-content { flex:1; display:flex; flex-direction:column; position:relative; }

/* --- DIFFICULTY UI --- */
.difficulty-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:20;
}
.difficulty-overlay.hidden { display:none; }
.difficulty-card {
  width:100%; max-width:320px; background:var(--card);
  border:6px solid var(--stroke); border-radius:24px; padding:32px 24px;
  text-align:center; box-shadow:0 8px 0 var(--stroke);
}
.face-display { width:100px; height:100px; margin:0 auto 20px; position:relative; }
.face-layer {
  position:absolute; inset:0; opacity:0; transform:scale(0.9);
  transition:opacity 0.3s ease, transform 0.3s var(--bounce);
}
.face-layer.active { opacity:1; transform:scale(1); }
.difficulty-info h2 { font-size:32px; margin-bottom:4px; }
.difficulty-info p { color:var(--muted); font-size:16px; margin-bottom:24px; font-weight:700; }

.diff-slider {
  -webkit-appearance:none; appearance:none; width:100%; height:24px; background:#EAEAEA;
  border:4px solid var(--stroke); border-radius:12px; outline:none; margin-bottom:32px;
}
.diff-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:32px; height:32px; border-radius:50%;
  background:#FFF; border:4px solid var(--stroke); cursor:pointer; box-shadow:0 4px 0 var(--stroke);
}
.diff-slider::-moz-range-thumb {
  width:28px; height:28px; border-radius:50%; background:#FFF; border:4px solid var(--stroke); cursor:pointer;
}

/* --- GAME AREA --- */
.game-area { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:space-between; }
.game-area.hidden { display:none; }

.grid-container { display:grid; grid-gap:8px; margin:0 auto; }

.tile {
  width:100%; aspect-ratio:1; display:inline-flex; justify-content:center; align-items:center;
  font-size:2rem; font-weight:700; text-transform:uppercase; perspective:1000px;
}
.tile-inner { width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform 0.6s var(--bounce); }
.tile.flipped .tile-inner { transform:rotateX(180deg); }
.tile-face {
  position:absolute; inset:0; backface-visibility:hidden;
  display:flex; justify-content:center; align-items:center;
  border-radius:12px; border:4px solid var(--stroke); box-shadow:0 4px 0 rgba(28,24,20,0.1);
}
.tile-front { background:var(--color-empty); }
.tile-back { transform:rotateX(180deg); color:#FFF; }
.tile-back.correct { background:var(--color-correct); border-color:var(--stroke); box-shadow:0 4px 0 var(--stroke); }
.tile-back.partial { background:var(--color-partial); border-color:var(--stroke); box-shadow:0 4px 0 var(--stroke); color:#1C1814; }
.tile-back.absent  { background:var(--color-absent); border-color:var(--stroke); box-shadow:0 4px 0 var(--stroke); }
.tile.filled .tile-inner .tile-front { border-color:var(--stroke); box-shadow:0 4px 0 var(--stroke); animation:pop 0.2s var(--bounce); }
.tile.shake { animation:shakeRow 0.4s ease-in-out; }

@keyframes pop { 0%{transform:scale(1);} 50%{transform:scale(1.1);} 100%{transform:scale(1);} }
@keyframes shakeRow { 0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-6px);} 40%,80%{transform:translateX(6px);} }

/* --- KEYBOARD --- */
.keyboard { width:100%; max-width:500px; margin:0 auto 10px; display:flex; flex-direction:column; gap:8px; }
.key-row { display:flex; justify-content:center; gap:6px; }
.key {
  font-family:inherit; font-size:1.2rem; font-weight:700; text-transform:uppercase;
  background:var(--card); color:var(--stroke); border:3px solid var(--stroke); border-radius:8px;
  height:58px; flex:1; display:flex; justify-content:center; align-items:center;
  cursor:pointer; box-shadow:0 4px 0 var(--stroke); transition:transform 0.1s, box-shadow 0.1s, background 0.3s;
}
.key:active { transform:translateY(4px); box-shadow:0 0 0 var(--stroke); }
.key.correct { background:var(--color-correct); color:#FFF; }
.key.partial { background:var(--color-partial); color:#1C1814; }
.key.absent  { background:var(--color-absent); color:#FFF; }
.key-large { flex:1.5; font-size:1rem; }

/* Win/loss modal icon */
.modal-icon { width:80px; height:80px; margin:0 auto; animation:floaty 2s var(--bounce) infinite; }

/* --- TOAST --- */
.toast {
  position:fixed; top:90px; left:50%; transform:translateX(-50%);
  background:var(--stroke); color:#FFF; font-weight:700; padding:12px 24px;
  border-radius:12px; z-index:200; opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.toast.show { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .modal-icon { animation:none; }
}