/* Customs: rebuild the foreign word with Turkish letters (js/tasks/gumruk.js).
   Shared task classes (.pill, .task-note) and the shake keyframe live in
   base.css. The look is paperwork at a border post: the foreign spelling
   above, struck through, and the Turkish one being written underneath it. */

.gm-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
  margin-top: 2em;
}

/* What arrived. Dimmed and struck: it does not get in looking like that. */
.gm-incoming { min-height: 1.6em; }
.gm-foreign {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  letter-spacing: 0.06em;
  color: var(--lavender);
  text-decoration: line-through;
  text-decoration-color: rgba(232, 118, 106, 0.6);
  opacity: 0.85;
}
.gm-incoming.cleared .gm-foreign {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* The paper it is being rewritten on. */
.gm-paper {
  display: flex;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  color: var(--cream);
  min-height: 1.3em;
}
.gm-fixed { display: inline-block; }

/* A hole in the spelling. Dim until it is this one's turn, then it opens. */
.gm-slot {
  display: inline-block;
  min-width: 0.7em;
  text-align: center;
  border-bottom: 2px dashed rgba(154, 147, 184, 0.5);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.gm-slot.open {
  border-bottom-color: var(--gold);
  animation: gm-waiting 1.8s ease-in-out infinite;
}
@keyframes gm-waiting {
  0%, 100% { border-bottom-color: rgba(232, 193, 106, 0.45); }
  50%      { border-bottom-color: var(--gold); }
}
.gm-slot.filled {
  color: var(--gold);
  border-bottom-color: transparent;
  text-shadow: 0 0 16px rgba(232, 193, 106, 0.55);
  animation: gm-land 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes gm-land {
  from { opacity: 0; transform: translateY(-0.5em); }
  to   { opacity: 1; transform: none; }
}
.gm-slot.no { animation: shake 0.4s ease; }

/* Stamped and through: the whole word, gold and scannable. */
.gm-paper.stamped { animation: gm-stamp 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes gm-stamp {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* The letters on offer. */
.gm-bank {
  display: flex;
  gap: 0.7em;
  min-height: 3em;
  flex-wrap: wrap;
  justify-content: center;
}
.gm-key {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--cream);
  background: none;
  border: 1.5px solid rgba(243, 234, 216, 0.35);
  border-radius: 0.4em;
  width: 2em;
  height: 2em;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  animation: gm-key-in 0.35s ease backwards;
}
@keyframes gm-key-in {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: none; }
}
.gm-key:hover, .gm-key:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(232, 193, 106, 0.3);
  outline: none;
}
.gm-key.no {
  animation: shake 0.4s ease;
  border-color: rgba(232, 118, 106, 0.8);
  color: #E8776A;
}

/* The door out, quiet at the bottom, like the roll call's before it. */
.gm-leave {
  position: fixed;
  left: 50%;
  bottom: 3.2vh;
  transform: translateX(-50%);
  z-index: 7;
  font-size: 0.78rem;
  opacity: 0.55;
  transition: opacity 0.3s ease;
  animation: none; /* the pill entrance would fight the centering transform */
}
.gm-leave:hover, .gm-leave:focus-visible { opacity: 1; }

@media (max-width: 640px) {
  .gm-key { font-size: 1.25rem; width: 1.8em; height: 1.8em; }
  .gm-leave { bottom: 2vh; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-slot.open, .gm-slot.filled, .gm-paper.stamped, .gm-key { animation: none; }
}