/* Encoding specificity principle. Everything scoped under .es-*. */

.es-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.es-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 290px; }
.es-hero img { display: block; width: 240px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .3)); }
.es-hero.wide img { width: 300px; }
.es-hero.art img { width: 300px; }

/* a word card: the quiet partner beside the word to learn */
.es-cd { display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; line-height: 1.1;
  background: #F4EEE2; color: #1B1A22; border-radius: 12px; padding: 8px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.3); white-space: nowrap; }
.es-cd i { font: italic 500 15px var(--serif); color: #6B6558; }
.es-cd b { font: 700 19px var(--serif); letter-spacing: .06em; }
.es-cd.es-big { padding: 16px 22px; border-radius: 16px; min-width: 220px; }
.es-cd.es-big i { font-size: 22px; }
.es-cd.es-big b { font-size: 32px; }
.es-cd.es-wait { background: transparent; border: 2px dashed var(--line-strong); box-shadow: none; }
.es-cd.es-wait b { color: var(--faint); font-size: 22px; letter-spacing: .02em; }
.es-cd.es-in { animation: esIn .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes esIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.es-blank { display: inline-block; min-width: 96px; border-bottom: 3px solid #6B6558; color: #6B6558; text-align: center; }
.es-slot { min-height: 76px; display: grid; place-items: center; }

.es-dots { display: flex; gap: 7px; }
.es-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); }
.es-dots i.now { border-color: var(--violet-bright); background: var(--violet-bright); }
.es-dots i.done { background: var(--raised); border-color: var(--dim); }
.es-count { font: 600 13px var(--mono); color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }

/* the break: 1 to 9 */
.es-nums { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; justify-content: center; }
.es-num { height: 52px; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--raised); color: var(--text); font: 700 22px var(--sans); }
.es-num.done { background: transparent; color: var(--faint); border-color: var(--line); }
.es-num.shake { animation: esShake .32s; }
@keyframes esShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* the keypad: A to Z and Skip */
.es-pad { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 380px; margin: 0 auto; }
.es-key { height: 44px; min-width: 0; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--raised); color: var(--text); font: 700 18px var(--sans); padding: 0; }
.es-key.es-skip { grid-column: span 2; font-size: 15px; color: var(--dim); }
.es-key.hit { background: var(--violet); border-color: var(--violet-bright); color: #fff; }

/* your score */
.es-score { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.es-srow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); }
.es-st { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.es-st b { font: 700 16px var(--sans); color: var(--text); }
.es-st span { font-size: 13px; color: var(--dim); }
.es-sd { display: flex; gap: 5px; }
.es-sd i { width: 14px; height: 14px; border-radius: 50%; }
.es-sd i.y { background: var(--gold); }
.es-sd i.n { border: 2px solid var(--faint); }
.es-srow em { font: 700 16px var(--mono); font-style: normal; color: var(--text); white-space: nowrap; }

/* second try */
.es-back { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.es-bk { display: grid; grid-template-columns: 52px 16px auto 1fr; align-items: center; gap: 8px; }
.es-bk .es-cd { padding: 6px 10px; }
.es-bk .es-cd b { font-size: 16px; }
.es-bk .es-cd i { font-size: 13px; }
.es-bk > i { color: var(--faint); font-style: normal; }
.es-new { font: italic 500 15px var(--serif); color: var(--dim); text-decoration: line-through; text-align: right; }
.es-bk em { font-style: normal; font-size: 13px; font-weight: 700; text-align: right; }
.es-bk.y em { color: var(--mint); }
.es-bk.n em { color: var(--dim); }

/* what you stored */
.es-map { width: 100%; max-width: 330px; overflow: visible; }
.es-mem { fill: rgba(123, 92, 253, .1); stroke: var(--violet-bright); stroke-width: 2; }
.es-ml { font: 700 12px var(--sans); fill: var(--dim); text-anchor: middle; letter-spacing: .06em; text-transform: uppercase; }
.es-link { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.es-nolink { fill: none; stroke: var(--faint); stroke-width: 2.5; stroke-dasharray: 5 6; }
.es-x { font: 700 16px var(--sans); fill: var(--red, #F2555A); text-anchor: middle; }
.es-nb { fill: #F4EEE2; }
.es-nb.gold { fill: #F4EEE2; stroke: var(--gold); stroke-width: 3; }
.es-nb.dim { fill: transparent; stroke: var(--faint); stroke-width: 2; stroke-dasharray: 4 4; }
.es-nt { font: italic 500 16px var(--serif); fill: #6B6558; text-anchor: middle; }
.es-nt.big { font: 700 18px var(--serif); fill: #1B1A22; letter-spacing: .06em; }
.es-nt.dim { fill: var(--dim); }

/* a closer word */
.es-steps { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; }
.es-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line); }
.es-step small { font: 700 12px var(--sans); color: var(--dim); letter-spacing: .05em; text-transform: uppercase; }
.es-assoc { display: flex; align-items: center; gap: 8px; font: italic 500 17px var(--serif); color: var(--text); }
.es-assoc i { font-style: normal; color: var(--faint); }
.es-hand { font: 600 20px var(--serif); font-style: italic; color: var(--gold); }
.es-mark { font: 700 13px var(--sans); font-style: normal; color: var(--dim); }
.es-steps.shown .es-q { border-color: var(--red, #F2555A); }
.es-steps.shown .es-mark { color: var(--red, #F2555A); }
.es-steps.back .es-r { border-color: var(--mint, #3DDC97); }

/* two rooms */
.es-rooms { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 360px; }
.es-rm { margin: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.es-rm img { width: 100%; max-height: 24vh; object-fit: contain; }
.es-rm figcaption { font-size: 13px; font-weight: 700; color: var(--dim); text-align: center; }
.es-arrow { font-style: normal; color: var(--faint); font-size: 20px; }

@media (max-height: 700px) {
  .es-cd.es-big { padding: 12px 18px; }
  .es-cd.es-big b { font-size: 28px; }
  .es-hero img, .es-hero.art img, .es-hero.wide img { max-height: 28vh; }
}