/* The pencil module uses its own selectors; no mascot artwork is included. */
.creativity-pad, .creativity-reward { color: #253d39; }
.creativity-copy { font-size: 18px; line-height: 1.55; margin: 0 0 14px; }
.creativity-instructions { font-size: 16px; line-height: 1.55; color: #405844; margin-bottom: 15px; }
.creativity-toolbar { display: grid; gap: 17px; margin-bottom: 17px; }
.creativity-colors { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.creativity-color { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 74px; border: 2px solid #b6bc9d; border-radius: 12px; padding: 8px 4px; background: #fffdf2; color: #253d39; }
.creativity-color > span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #344735; background: var(--pencil-ink); }
.creativity-color small { font-size: 13px; line-height: 1.35; }
.creativity-color.selected { border: 3px solid #62428c; background: #eee5f7; padding: 7px 3px; }
.creativity-color:hover { background: #e8efd7; }
.creativity-brush { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 16px; font-weight: bold; }
.creativity-brush output { font-size: 16px; min-width: 32px; text-align: right; }
.creativity-brush input { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; accent-color: #8051b9; cursor: pointer; }
.creativity-canvas-wrap { border: 3px solid #344735; border-radius: 17px; overflow: hidden; background: #fff; }
.creativity-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1.6; background: #fff; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.creativity-actions, .creativity-reward-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 17px 0; }
.creativity-actions button, .creativity-reward-actions button { font-size: 16px; min-height: 46px; line-height: 1.4; padding: 11px 15px; }
.creativity-actions button:disabled { color: #536249; background: #eeeada; opacity: .7; }
.creativity-profile { display: grid; gap: 9px; margin-top: 19px; }
.creativity-profile label { font-size: 17px; line-height: 1.5; font-weight: bold; }
.creativity-profile label span { font-size: 14px; font-weight: normal; }
.creativity-profile input, .creativity-profile textarea { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 2px solid #a8b593; border-radius: 12px; background: #fffdf5; color: #253d39; font: 17px/1.55 'Trebuchet MS',Verdana,sans-serif; }
.creativity-profile textarea { resize: vertical; min-height: 108px; }
.creativity-profile label:not(:first-child) { margin-top: 9px; }
.creativity-profile input::placeholder, .creativity-profile textarea::placeholder { color: #5f6e59; opacity: 1; }
.creativity-status { font-size: 14px; line-height: 1.55; color: #445c3e; margin: 15px 0 0; overflow-wrap: anywhere; }
.creativity-status:empty { display: none; }
.creativity-small { font-size: 15px; line-height: 1.55; color: #445c3e; margin-top: 16px; }
.creativity-reward { margin-top: 27px; padding-top: 24px; border-top: 2px solid #c6cfad; }
.creativity-reward h3 { font: bold 25px/1.25 Georgia,serif; margin: 0 0 13px; }
.creativity-preview { display: block; width: 100%; max-height: 250px; object-fit: contain; border: 2px solid #344735; border-radius: 15px; background: #fff; }
.creativity-empty-preview { padding: 30px 20px; border: 2px dashed #829772; border-radius: 15px; background: #fffdf5; font: 20px/1.5 Georgia,serif; text-align: center; color: #4d6443; }
.creativity-pad button:focus-visible, .creativity-reward button:focus-visible,
.creativity-profile input:focus-visible, .creativity-profile textarea:focus-visible,
.creativity-brush input:focus-visible { outline: 3px solid #653b95; outline-offset: 3px; }
@media (max-width: 650px) {
  .creativity-copy { font-size: 16px; }
  .creativity-instructions { font-size: 15px; }
  .creativity-colors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .creativity-color { min-height: 72px; }
  .creativity-color small { font-size: 13px; }
  .creativity-actions button, .creativity-reward-actions button { font-size: 15px; min-height: 46px; }
  .creativity-profile label { font-size: 16px; }
  .creativity-profile input, .creativity-profile textarea { font-size: 16px; }
  .creativity-reward h3 { font-size: 23px; }
  .creativity-empty-preview { font-size: 18px; padding: 24px 16px; }
}
@media (max-width: 370px) {
  .creativity-actions button, .creativity-reward-actions button { flex: 1 1 100%; }
  .creativity-profile label span { display: block; }
}