.play-page[data-game="oja-ero"] { background: var(--sand); }
.btn-lg { font-size: 1.1rem; padding: 16px 28px; }
.oe-why { margin: 0; background: var(--white); border-radius: 16px; padding: 14px 16px; }
.oe-best { margin: 0; color: var(--ink); }
.oe-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.oe-count { font-size: 0.95rem; }
.oe-basket { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border-radius: 999px; padding: 6px 12px; font-size: 0.95rem; }
.oe-stall { background: var(--white); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .3s ease; }
.oe-stall.is-light { box-shadow: 0 0 0 4px var(--sage), var(--shadow); }
.oe-awning {
  height: 34px;
  background: repeating-linear-gradient(90deg, var(--magenta) 0 40px, var(--cream) 40px 80px);
  border-bottom: 6px solid var(--ink);
}
.oe-customer { display: flex; gap: 14px; padding: 18px 18px 22px; align-items: flex-start; }
.oe-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-family: var(--font-display); font-size: 1.5rem; }
.oe-name { margin: 0 0 4px; font-weight: 700; color: var(--ink); }
.oe-thought { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 4.5vw, 1.6rem); line-height: 1.25; color: var(--ink); }
.oe-step { margin: 4px 0 0; font-weight: 700; color: var(--ink); }
.oe-options, .oe-reframes { display: grid; gap: 10px; }
.oe-opt {
  font: inherit; text-align: left; cursor: pointer; color: var(--ink); background: var(--white);
  border: 2px solid var(--line); border-radius: 16px; padding: 14px 16px; min-height: 52px;
}
.oe-opt:hover:not(:disabled) { border-color: var(--ink); }
.oe-opt:disabled { cursor: default; opacity: 0.6; }
.oe-opt.is-right { opacity: 1; border-color: var(--sage); background: #e6f2ec; }
.oe-opt.is-wrong { opacity: 1; border-color: var(--danger); background: #fbeceb; }
.oe-opt--thought { font-size: 1rem; line-height: 1.45; }
.oe-feedback { margin: 0; border-radius: 16px; padding: 14px 16px; }
.oe-feedback.is-good { background: #e6f2ec; color: #1d5a4d; }
.oe-feedback.is-close { background: var(--white); color: var(--ink-soft); }
.oe-feedback strong { color: var(--ink); }
.oe-learned-h { font-size: 1.25rem; margin: 6px 0 0; color: var(--ink); }
.oe-learned { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.oe-help { background: var(--sand); border-radius: 14px; padding: 12px 14px; }
.oe-linkbtn { font: inherit; font-weight: 700; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.oe-end-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }