/* Poster Mail (Part 7). The shared look comes from Email Room's and the
   revision games' stylesheets; this adds the poster and the writing screen. */

.pm-poster { background: linear-gradient(160deg, #fff3c4, #ffd2b8); border: 4px solid #c9742c; border-radius: 16px; padding: 16px; text-align: center; line-height: 1.6; }
.pm-poster h3 { font-family: var(--display); font-size: clamp(24px, 6vw, 32px); line-height: 1.1; margin: 0 0 8px; color: #7a3b0c; }
.pm-poster p { border-radius: 8px; padding: 2px 6px; }
.pm-poster.hunt p { cursor: pointer; box-shadow: inset 0 -2px 0 rgba(122, 59, 12, .35); margin: 4px 0; }
.pm-poster p.found { background: #bdebd0; box-shadow: inset 0 -2px 0 var(--good); font-weight: 700; }
.pm-poster p.miss { background: #ffd591; }
.pm-task { margin: 12px 0; font-weight: 700; }
.pm-task span { display: block; font-weight: 400; color: var(--muted); }
.pm-checks { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0; }
.pm-checks li { font-size: 15px; padding: 4px 10px; border-radius: 999px; background: #dfe7f2; color: var(--muted); }
.pm-checks li::before { content: "○ "; }
.pm-checks li.done { background: var(--good); color: #fff; font-weight: 700; }
.pm-checks li.done::before { content: "✓ "; }
.pm-meter { margin-top: 12px; }
.pm-meter .meter-zone { left: 60%; width: 20%; }
.pm-write .email { margin-top: 12px; }
.pm-write .body { padding: 12px; }
#write { display: block; width: 100%; min-height: 280px; resize: none; background: transparent; position: relative; border-color: var(--line); }
.ai-scores.three p { flex-basis: 96px; }
.ai-total { font-family: var(--display); font-size: 22px; }
@media (min-width: 900px) {
  .pm-write { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
  .pm-write .side { position: sticky; top: 96px; }
  .pm-write .email { margin-top: 0; }
}