/* Layout reset for better mobile handling */
* { box-sizing: border-box; }
body { margin:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#111; color:#eee; display:flex; justify-content:center; }
.app { max-width: 480px; padding: 24px; }
h1 { text-align:center; }
.board { display:grid; grid-template-columns: repeat(5, 56px); grid-auto-rows:56px; gap:8px; justify-content:center; margin: 16px 0 12px; }
.cell { display:flex; align-items:center; justify-content:center; border:1px solid #333; text-transform:uppercase; font-weight:600; font-size:24px; }
.cell { width:56px; height:56px; perspective:800px; transform-style:preserve-3d; transform: translateZ(0); backface-visibility:hidden; will-change: transform, background-color, border-color; transition: background-color .25s ease, border-color .25s ease; transform-origin: center center; }
.cell.flip {
  animation: flip 1.2s cubic-bezier(.2,.7,.2,1) forwards;
}
.cell.wobble { animation: wobble 700ms ease; transform-origin: center center; }
.cell.reveal {
  backface-visibility:hidden;
}
.cell.pending {
  /* used during flip before applying status color */
}
.cell.correct { background:#10b981; border-color:#10b981; }
.cell.present { background:#f59e0b; border-color:#f59e0b; }
.cell.absent { background:#6b7280; border-color:#6b7280; }
.controls { display:none; }
.msg { text-align:center; margin-top:12px; min-height: 24px; opacity:.9; }
.msg.error { color:#ff5a5a; font-weight:700; letter-spacing:0.3px; text-shadow: 0 0 6px rgba(255,90,90,.55), 0 0 12px rgba(255,90,90,.25); animation: error-pop 420ms ease-out 0s 1, error-glow 1.8s ease-in-out .5s infinite alternate; }
.msg.win { color:#10b981; font-weight:700; font-size:40px; letter-spacing:0.5px; text-shadow: 0 0 6px rgba(16,185,129,.6), 0 0 14px rgba(16,185,129,.35); animation: pop 900ms ease-out 0s 1, glow 2.2s ease-in-out 1.2s infinite alternate; }
/* Power tiers based on how early the win is: p1 (first try) strongest → p6 weakest */
.msg.win.win-p1 { font-size:64px; text-shadow: 0 0 10px rgba(16,185,129,.9), 0 0 24px rgba(16,185,129,.6); }
.msg.win.win-p2 { font-size:56px; text-shadow: 0 0 10px rgba(16,185,129,.8), 0 0 22px rgba(16,185,129,.5); }
.msg.win.win-p3 { font-size:50px; text-shadow: 0 0 8px rgba(16,185,129,.75), 0 0 20px rgba(16,185,129,.45); }
.msg.win.win-p4 { font-size:46px; text-shadow: 0 0 8px rgba(16,185,129,.7), 0 0 18px rgba(16,185,129,.4); }
.msg.win.win-p5 { font-size:42px; text-shadow: 0 0 7px rgba(16,185,129,.65), 0 0 16px rgba(16,185,129,.35); }
.msg.win.win-p6 { font-size:38px; text-shadow: 0 0 6px rgba(16,185,129,.6), 0 0 14px rgba(16,185,129,.3); }

.keyboard { max-width: 560px; margin: 24px auto 0; display:flex; flex-direction:column; gap:8px; width:100%; }
.kb-row { display:flex; justify-content:center; gap:6px; padding: 0 8px; }
.key { padding: 12px 10px; text-transform:uppercase; background:#2a2a2a; color:#eee; border:1px solid #333; border-radius:6px; text-align:center; cursor:pointer; user-select:none; flex: 1 1 0; min-width: 0; display:flex; align-items:center; justify-content:center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.key.correct { background:#10b981; border-color:#10b981; }
.key.present { background:#f59e0b; border-color:#f59e0b; }
.key.absent { background:#6b7280; border-color:#6b7280; color:#9ca3af; filter: contrast(1.1) brightness(0.85); }
.key.wide { flex: 1.5 1 0; padding: 12px 14px; }
.key.wide[data-key="enter"] { font-size: 12px; }

@keyframes flip {
  0% { transform: rotateX(0deg) translateZ(0); }
  50% { transform: rotateX(90deg) translateZ(0); }
  100% { transform: rotateX(0deg) translateZ(0); }
}

@keyframes wobble {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-6deg); }
  40% { transform: rotate(5deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes error-pop {
  0% { transform: scale(0.96); opacity: 0.6; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes error-glow {
  0% { text-shadow: 0 0 6px rgba(255,90,90,.45), 0 0 10px rgba(255,90,90,.2); }
  100% { text-shadow: 0 0 10px rgba(255,90,90,.8), 0 0 18px rgba(255,90,90,.35); }
}

/* Responsive tweaks */
@media (max-width: 420px) {
  .app { max-width: 360px; padding: 16px; width:100%; }
  .board { grid-template-columns: repeat(5, 48px); grid-auto-rows:48px; gap:6px; }
  .cell { width:48px; height:48px; font-size:20px; }
  .keyboard { max-width: 100%; margin: 18px auto 0; gap:6px; }
  .kb-row { gap:6px; padding: 0 8px; }
  .key { padding: 10px 8px; font-size:14px; }
  .key.wide { padding: 10px 12px; }
  .key.wide[data-key="enter"] { font-size: 10px; }
  .msg.win { font-size: 32px; }
  .msg.win.win-p1 { font-size: 54px; }
  .msg.win.win-p2 { font-size: 46px; }
  .msg.win.win-p3 { font-size: 40px; }
}

@media (max-width: 360px) {
  .app { max-width: 320px; padding: 12px; width:100%; }
  .board { grid-template-columns: repeat(5, 44px); grid-auto-rows:44px; gap:5px; }
  .cell { width:44px; height:44px; font-size:18px; }
  .keyboard { max-width: 100%; margin: 16px auto 0; gap:5px; }
  .kb-row { gap:5px; padding: 0 8px; }
  .key { padding: 8px 6px; font-size:13px; }
  .key.wide { padding: 8px 10px; }
  .key.wide[data-key="enter"] { font-size: 9px; }
}

@keyframes pop {
  0% { transform: scale(0.9); opacity: 0; }
  40% { transform: scale(1.06); opacity: 1; }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes glow {
  0% { text-shadow: 0 0 6px rgba(16,185,129,.4), 0 0 10px rgba(16,185,129,.2); }
  100% { text-shadow: 0 0 10px rgba(16,185,129,.75), 0 0 20px rgba(16,185,129,.35); }
}