/* ── Akimi Islands — quests ───────────────────────────────────────────────
   The corner tracker, the "talk to me" button, and the talking card.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Tracker ──────────────────────────────────────────────────────────── */

.tracker {
  /* Same cell as the toasts. Without naming the column, two items that
     both ask for row 2 are put in row 2 *column 1* and *column 2*, which
     invents a second column and squashes the rest of the screen. */
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  align-self: start;
  margin-top: 14px;
  pointer-events: auto;
  width: min(272px, 62vw);
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-md);
  animation: tracker-in .45s var(--ease) both;
}
@keyframes tracker-in { from { opacity: 0; transform: translateX(26px); } }

.tracker.ready { background: #E4FBF1; box-shadow: 0 0 0 3px var(--mint), var(--shadow-md); }

.tracker-head { display: flex; align-items: center; gap: 9px; }
.tracker-icon { font-size: 23px; line-height: 1; flex: none; }
.tracker-title { font-size: 16px; font-weight: 600; line-height: 1.2; }

/* Filled dots instead of "3 / 5" — countable by someone still learning
   numbers, and the fill animation is its own small reward. */
.tracker-dots { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }

.dot {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: rgba(27, 42, 56, .13);
  transition: background .25s ease, transform .25s var(--ease);
}
.dot.on { background: var(--mint); }
.dot.just { animation: dot-pop .5s var(--ease); }
@keyframes dot-pop {
  0% { transform: scale(.4); }
  55% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.tracker-hint {
  margin-top: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #0E7A55;
}

/* ── "Talk to Marla" button ───────────────────────────────────────────── */

.talk-prompt {
  pointer-events: auto;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 24px 11px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 18px;
  box-shadow: var(--shadow-md);
  min-height: var(--tap);
  animation: talk-in .4s var(--ease) both, talk-nudge 2.4s ease-in-out 1s infinite;
}
.talk-prompt:active { transform: translateY(3px); box-shadow: var(--shadow-sm); }
.talk-face { font-size: 27px; line-height: 1; }
.talk-words { font-weight: 500; }
.talk-words b { font-weight: 700; }

@keyframes talk-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes talk-nudge {
  0%, 88%, 100% { transform: translateY(0); }
  94% { transform: translateY(-5px); }
}

/* ── The talking card ─────────────────────────────────────────────────── */

/* Sits low on the screen so the islander you are talking to stays visible
   above it, rather than being covered by their own speech. */
.scrim--talk { align-items: end; padding-bottom: max(24px, env(safe-area-inset-bottom)); }

.talk-card {
  width: min(560px, 100%);
  background: var(--cream);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px 18px;
  cursor: pointer;
  animation: panel-in .38s var(--ease) both;
}

.talk-who { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }

.talk-portrait {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  font-size: 30px;
}

.talk-names { display: flex; flex-direction: column; line-height: 1.2; }
.talk-title { font-size: 21px; font-weight: 700; }
.talk-role { font-size: 15px; color: var(--ink-soft); }

.talk-line {
  font-size: 22px;
  line-height: 1.4;
  min-height: 2.8em;      /* stops the card jumping about between lines */
  margin-bottom: 14px;
}

.talk-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.talk-choices { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.talk-more { font-size: 14px; color: var(--ink-soft); }

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .tracker { width: min(230px, 58vw); padding: 11px 13px; }
  .tracker-title { font-size: 15px; }
  .dot { width: 15px; height: 15px; }
  .talk-line { font-size: 19px; }
  .talk-prompt { font-size: 17px; padding: 10px 18px 10px 12px; }
}

@media (max-height: 460px) {
  .tracker { margin-top: 4px; padding: 9px 12px; }
  .tracker-dots { margin-top: 7px; }
  .talk-line { font-size: 18px; min-height: 2.2em; }
  .talk-card { padding: 14px 18px 12px; }
  .talk-portrait { width: 44px; height: 44px; font-size: 24px; }
}