/* ─── Find the Four — stilmall ─────────────────────────────────────────────── */

:root {
  --ftf-color-1: #f9df6d;
  --ftf-color-2: #a0c35a;
  --ftf-color-3: #b0c4ef;
  --ftf-color-4: #ba81c5;
  --ftf-bg:      #efefe6;
  --ftf-selected:#5a594e;
}

/* ─── Ordknappar ─────────────────────────────────────────────────────────── */

.ftf-word-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      72px;
  padding:         6px 4px;
  background:      var(--ftf-bg);
  border:          none;
  border-radius:   8px;
  font-weight:     700;
  font-size:       clamp(0.65rem, 1.8vw, 0.85rem);
  text-transform:  uppercase;
  letter-spacing:  0.04em;
  color:           #1e1e1e;
  cursor:          pointer;
  transition:      background 0.15s, color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  word-break:      break-word;
  text-align:      center;
  line-height:     1.2;
}

.ftf-word-btn:hover:not(:disabled) {
  background: #deded5;
}

.ftf-word-btn--selected {
  background: var(--ftf-selected);
  color:      #ffffff;
}

.ftf-word-btn--selected:hover {
  background: #6e6d60;
}

/* Animate out when category solved */
.ftf-word-btn--removing {
  animation: ftf-pop-out 0.35s ease forwards;
}

/* ─── Skakning vid fel ───────────────────────────────────────────────────── */

.ftf-word-btn--shaking {
  animation: ftf-shake 0.5s ease;
}

@keyframes ftf-shake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-6px); }
  30%     { transform: translateX(6px); }
  45%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px); }
  75%     { transform: translateX(-3px); }
  90%     { transform: translateX(3px); }
}

@keyframes ftf-pop-out {
  0%   { transform: scale(1);    opacity: 1; }
  60%  { transform: scale(1.12); opacity: 0.8; }
  100% { transform: scale(0);    opacity: 0; }
}

/* ─── Lösta kategorirader ────────────────────────────────────────────────── */

.ftf-solved-row {
  border-radius: 8px;
  padding:       12px 16px;
  text-align:    center;
  animation:     ftf-slide-in 0.35s ease;
}

.ftf-solved-cat {
  font-weight:     800;
  font-size:       0.8rem;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  color:           #1e1e1e;
  margin-bottom:   2px;
}

.ftf-solved-words {
  font-size:  0.8rem;
  color:      #2e2e2e;
  font-weight: 600;
}

@keyframes ftf-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Misstags-prickar ───────────────────────────────────────────────────── */

.ftf-dot {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  background:    #5a594e;
  transition:    background 0.3s, transform 0.3s;
  display:       inline-block;
}

.ftf-dot--used {
  background:    #d4d4c8;
  transform:     scale(0.8);
}

/* ─── Toast-notis ────────────────────────────────────────────────────────── */

#ftf-toast {
  pointer-events: none;
}

#ftf-toast-inner {
  animation: ftf-toast-in 0.2s ease;
}

@keyframes ftf-toast-in {
  from { opacity: 0; transform: translateY(-6px) translateX(-50%); }
  to   { opacity: 1; transform: translateY(0)    translateX(0); }
}