.ec-card { align-items: stretch; }
.ec-ask { display: flex; align-items: center; gap: 10px; }
.ec-say { flex: 1; font-size: 21px; font-weight: 800; line-height: 1.3; }
.ec-scene { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ec-carton { display: grid; gap: 6px; padding: 10px; border-radius: 18px; background: #d9c29a; border: 3px solid #b99a68; box-shadow: inset 0 -4px 0 #c4a978; width: 100%; max-width: 380px; }
.ec-carton--5 { grid-template-columns: repeat(5, 1fr); }
.ec-carton--6 { grid-template-columns: repeat(6, 1fr); max-width: 420px; }
.ec-cup { aspect-ratio: 1; min-height: 50px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #b99a68 0 55%, #c9ae80 56%); display: flex; align-items: center; justify-content: center; }
.ec-egg {
  width: 82%; min-width: 48px; min-height: 48px; aspect-ratio: 4 / 5; border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%;
  border: 2px solid rgba(0,0,0,.12); padding: 0; cursor: pointer; font-weight: 900; font-size: 20px; color: #1d2733;
  box-shadow: inset -4px -5px 0 rgba(0,0,0,.08), inset 4px 4px 0 rgba(255,255,255,.45);
}
.ec-egg--brown { background: #c98d5a; }
.ec-egg--white { background: #fbf6ec; }
.ec-egg--gone { background: transparent; border: 3px dashed #8a6d45; box-shadow: none; cursor: default; opacity: .7; width: 60%; min-width: 0; min-height: 0; }
.ec-egg.is-counted { outline: 3px solid var(--suzy-amber); outline-offset: 1px; }
.ec-carton--6 { gap: 4px; padding: 6px; }
.ec-carton--6 .ec-egg { width: 100%; }
.ec-cupnum { font-weight: 900; font-size: 18px; color: #5a3d12; }
.ec-card { padding: 14px 12px; }
.ec-nests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; }
@media (min-width: 600px) { .ec-nests { grid-template-columns: repeat(3, 1fr); } }
.ec-nest { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 12px 8px; min-height: 80px; border-radius: 40% 40% 48% 48%; background: radial-gradient(ellipse at 50% 40%, #e8cf8f 0 45%, #b88a3e 70%); border: 3px solid #8a6424; }
.ec-nest .ec-egg { width: 48px; }
.ec-eq { text-align: center; font-size: clamp(30px, 9vw, 42px); font-weight: 900; letter-spacing: .03em; }
.ec-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 10px; }
.ec-choice { min-height: 64px; border-radius: 18px; border: 3px solid #d8cfbd; background: #fff; font-size: 30px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 rgba(29,39,51,.12); }
@media (hover: hover) { .ec-choice:hover:not([disabled]) { border-color: var(--barn); } }
.ec-choice.is-correct { background: #eaf7e6; border-color: var(--green); color: #1d5c28; }
.ec-choice.is-wrong { background: #f4f1ea; border-style: dashed; color: #8a8a8a; box-shadow: none; }