/* ===========================================================
   FIVES — the daily word game. Full-craft motion system.
   Timings per spec: 250ms + 250ms rotateX flip, ~300ms stagger,
   pop on entry, 600ms invalid shake, ~1s win dance.
   =========================================================== */

.fives {
  --tile: 62px;
  --gap: 5px;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  overflow-x: hidden;
}

/* ---- header ---- */
.fives__header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--rule); padding: 8px 16px;
  max-width: 560px; width: 100%; margin: 0 auto;
}
.fives__title {
  font-family: var(--f-slab); font-weight: 700; font-size: 30px;
  letter-spacing: 0.02em; color: var(--ink); line-height: 1; text-align: center;
}
.fives__title small {
  display: block; font-family: var(--f-sans); font-weight: 600;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 2px;
}
.fives__icons { display: flex; gap: 4px; justify-content: flex-end; }
.iconbtn {
  background: none; border: none; padding: 7px; border-radius: 6px;
  color: var(--ink-soft); display: inline-flex; transition: background .15s;
}
.iconbtn:hover { background: var(--paper-band); }
.iconbtn svg { width: 22px; height: 22px; }
.fives__homelink {
  font-family: var(--f-sans); justify-self: start;
  font-weight: 600; font-size: 13px; color: var(--ink-mute);
}

/* ---- board ---- */
.fives__main {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; max-width: 560px; width: 100%; margin: 0 auto;
}
.board-wrap { display: flex; align-items: center; flex: 1; padding: 12px 0; }
.board {
  display: grid; grid-template-rows: repeat(6, var(--tile)); gap: var(--gap);
}
.board__row {
  display: grid; grid-template-columns: repeat(5, var(--tile)); gap: var(--gap);
}
.tile {
  width: var(--tile); height: var(--tile);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-weight: 700; font-size: 2rem;
  text-transform: uppercase; color: var(--ink);
  border: 2px solid var(--g-empty); background: var(--paper);
  user-select: none;
}
.tile[data-state="tbd"] { border-color: var(--g-filled); color: var(--ink); }
.tile[data-state="correct"] { background: var(--g-correct); border-color: var(--g-correct); color: #fff; }
.tile[data-state="present"] { background: var(--g-present); border-color: var(--g-present); color: #fff; }
.tile[data-state="absent"]  { background: var(--g-absent);  border-color: var(--g-absent);  color: #fff; }

/* pop on letter entry */
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.tile.pop { animation: pop 100ms ease-in-out; }

/* flip reveal: two 250ms halves via animation-delay stagger set inline */
@keyframes flip-in {
  0% { transform: rotateX(0); }
  100% { transform: rotateX(-90deg); }
}
@keyframes flip-out {
  0% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0); }
}
.tile.flip {
  animation: flip-in 250ms ease-in forwards;
}
.tile.flip-back {
  animation: flip-out 250ms ease-in forwards;
}

/* invalid-word shake ~600ms */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.board__row.shake { animation: shake 600ms cubic-bezier(.36,.07,.19,.97); }

/* win dance ~1000ms per tile, staggered by neighbor */
@keyframes dance {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-30px); }
  40%  { transform: translateY(4px); }
  55%  { transform: translateY(-14px); }
  70%  { transform: translateY(2px); }
  85%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.tile.dance { animation: dance 1000ms ease-in-out; }

/* ---- keyboard ---- */
.keyboard {
  width: 100%; max-width: 500px; margin: 0 auto; padding: 8px 6px 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.keyrow { display: flex; justify-content: center; gap: 6px; touch-action: manipulation; }
.key {
  height: 58px; min-width: 30px; flex: 1;
  border: none; border-radius: 4px; background: var(--g-key);
  font-family: var(--f-sans); font-weight: 700; font-size: 13px; text-transform: uppercase;
  color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .05s;
}
.key:hover { background: #c3c8cd; }
.key:active { transform: translateY(1px); }
.key--wide { flex: 1.5; font-size: 11px; }
.key[data-state="correct"] { background: var(--g-correct); color: #fff; }
.key[data-state="present"] { background: var(--g-present); color: #fff; }
.key[data-state="absent"]  { background: var(--g-absent);  color: #fff; }
.key svg { width: 20px; height: 20px; }

/* ---- toast ---- */
.toast-layer {
  position: fixed; top: 96px; left: 0; right: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff; font-family: var(--f-sans);
  font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
  animation: toast-in 120ms ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.toast.out { opacity: 0; transition: opacity .3s; }

/* ---- modal ---- */
.modal-scrim {
  position: fixed; inset: 0; background: rgba(255,255,255,.6);
  backdrop-filter: blur(2px); z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 16px;
}
.modal-scrim.open { display: flex; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper); color: var(--ink); border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,.28); width: 100%; max-width: 480px;
  padding: 28px 26px 26px; position: relative; max-height: 92vh; overflow-y: auto;
  animation: modal-up .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes modal-up { from { transform: translateY(18px); opacity: .4; } to { transform: none; opacity: 1; } }
.modal__close {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  color: var(--ink-soft); padding: 4px; border-radius: 6px;
}
.modal__close:hover { background: var(--paper-band); }
.modal__close svg { width: 22px; height: 22px; }
.modal h2 {
  font-family: var(--f-sans); font-weight: 800; font-size: 15px;
  letter-spacing: 0.09em; text-transform: uppercase; text-align: center; margin: 0 0 18px;
}

/* stats */
.stats-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.stat { flex: 1; text-align: center; }
.stat__n { font-family: var(--f-slab); font-weight: 600; font-size: 34px; line-height: 1; }
.stat__l { font-family: var(--f-sans); font-size: 11px; color: var(--ink-mute); margin-top: 4px; }

.dist { margin-bottom: 22px; }
.dist h3 {
  font-family: var(--f-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.09em;
  text-transform: uppercase; text-align: center; margin: 0 0 12px;
}
.dist__row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--f-sans); }
.dist__k { width: 12px; font-weight: 700; font-size: 13px; }
.dist__bar {
  background: var(--g-absent); color: #fff; font-weight: 700; font-size: 12px;
  padding: 2px 8px; min-width: 22px; text-align: right; border-radius: 2px;
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.dist__bar.today { background: var(--g-correct); }

.modal__cta { display: flex; align-items: stretch; gap: 18px; }
.countdown { flex: 1; text-align: center; }
.countdown h3 {
  font-family: var(--f-sans); font-weight: 800; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 6px;
}
.countdown__t { font-family: var(--f-slab); font-weight: 600; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.modal__divider { width: 1px; background: var(--rule); }
.share-side { flex: 1; display: flex; align-items: center; }
.share-btn {
  width: 100%; background: var(--g-correct); color: #fff; border: none;
  font-family: var(--f-sans); font-weight: 800; font-size: 18px; letter-spacing: 0.03em;
  padding: 14px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, transform .05s;
}
.share-btn:hover { background: #3d8a6e; }
.share-btn:active { transform: translateY(1px); }
.share-btn svg { width: 20px; height: 20px; }

.modal__note {
  font-family: var(--f-sans); font-size: 12px; color: var(--ink-mute);
  text-align: center; margin-top: 18px; line-height: 1.5;
}
.modal__note a { font-weight: 600; }

/* help modal content */
.help-body { font-family: var(--f-sans); font-size: 15px; line-height: 1.5; }
.help-body p { margin: 0 0 12px; }
.help-body .ex { display: flex; gap: 4px; margin: 12px 0; }
.help-body .ex .tile { width: 40px; height: 40px; font-size: 1.3rem; border-width: 2px; }
.help-body hr { border: 0; border-top: 1px solid var(--rule); margin: 16px 0; }

/* settings toggles */
.setting { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--rule); font-family: var(--f-sans); }
.setting:last-child { border-bottom: none; }
.setting__l b { display: block; font-size: 15px; }
.setting__l span { font-size: 12px; color: var(--ink-mute); }
.switch { position: relative; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__track { position: absolute; inset: 0; background: var(--g-absent); border-radius: 24px; transition: background .2s; cursor: pointer; }
.switch__track::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.switch input:checked + .switch__track { background: var(--g-correct); }
.switch input:checked + .switch__track::before { transform: translateX(20px); }

/* account nudge card in stats */
.reg-card {
  background: var(--paper-warm); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px; margin-bottom: 20px; font-family: var(--f-sans); text-align: center;
}
.reg-card b { font-size: 14px; }
.reg-card p { font-size: 12.5px; color: var(--ink-mute); margin: 4px 0 12px; }
.reg-card .row { display: flex; gap: 8px; }
.reg-card input {
  flex: 1; font-family: var(--f-sans); font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--rule-dark); border-radius: 5px;
}
.reg-card .btn { padding: 9px 16px; font-size: 14px; }
.reg-card__done { color: var(--g-correct); font-weight: 700; font-size: 13px; }

@media (max-width: 500px) {
  .fives { --tile: min(58px, 15vw); }
  .fives__homelink { display: none; }
}
@media (max-height: 700px) {
  .fives { --tile: 52px; }
  .key { height: 50px; }
}