/* ═══ Qorqori: character palette, hero rendering, profile identity ═══ */

/* The palette lives on the character class so it can be tuned without
   redesigning the asset. The sprite falls back to the same hex values. */
.qorqori{
  --q-body:#93b37c; --q-body-deep:#7fa066; --q-outline:#42593a;
  --q-eye:#333d2c; --q-eye-white:#fbfaf4; --q-cheek:#e8a77f;
  --q-note:#fdf3dd; --q-note-line:#d9c9a6; --q-mouth:#8a5a40; --q-star:#f0b95c;
  width:100%;height:auto;display:block
}

/* ── Today hero ── */
.frog-emoji .qorqori{width:104px;height:104px}
.frog-empty .frog-emoji{display:block;line-height:0}

/* ── Profile: character identity ──
   The identity strip is a button. The character is a choice the user can
   revisit, and the whole strip (thumb, name, change chip) is one target, so
   going back to the picker never depends on hitting a small label. Geometry is
   the same paper row it was before; only the affordances are new. */
.char-card{margin-top:0}
.char-identity{width:100%;display:flex;align-items:center;gap:14px;padding:8px 10px;border:1.5px solid transparent;border-radius:var(--radius-md);background:transparent;font-family:var(--font-ui);color:var(--text);text-align:start;cursor:pointer;transition:background var(--duration-fast),border-color var(--duration-fast),transform var(--duration-fast)}
.char-identity:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.char-identity:active{transform:scale(.99)}
.char-thumb{width:58px;height:58px;flex-shrink:0;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--green) 14%,transparent);display:grid;place-items:center;padding:3px}
.char-thumb .qorqori{width:52px;height:52px}
.char-id-text{min-width:0;flex:1}
.char-id-text b{display:block;font-family:var(--font-personality);font-size:17px;font-weight:700}
.char-id-text span{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:2px}
.char-change{margin-inline-start:auto;flex-shrink:0;border:1.5px solid var(--border);color:var(--accent);font-size:11.5px;font-weight:600;line-height:1.5;padding:5px 13px;border-radius:var(--radius-pill);transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast)}
@media (hover:hover){
  .char-identity:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
  .char-identity:hover .char-change{background:var(--accent);border-color:var(--accent);color:#fff}
}

@media (max-width:480px){
  .frog-emoji .qorqori{width:90px;height:90px}
  .char-thumb{width:52px;height:52px;border-radius:var(--radius-md)}
  .char-thumb .qorqori{width:46px;height:46px}
}