/* Id, ego and superego. The id is ember, the superego ice, the ego the
   plain cream of the page: it is the one that is you. */
:root { --eg-id: #FF8A3D; --eg-id-ink: #2B1000; --eg-sup: #8AB4FF; --eg-sup-ink: #0B1A33; }

/* kitchen: the fridge centred, the id left of its open door, the superego
   and the ego to its right, Maya's note stuck on its edge */
.eg-kitchen { position: relative; height: 198px; flex: none; }
.eg-spill { position: absolute; left: 50%; bottom: 0; width: 280px; height: 64px; margin-left: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,214,150,.3), transparent); }
.eg-fridge { position: absolute; left: 50%; top: 12px; width: 124px; height: 172px; margin-left: -62px; border-radius: 14px; background: linear-gradient(160deg, #2a3150, #161b2e); box-shadow: 0 16px 36px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(234,227,215,.12); perspective: 800px; }
.eg-in { position: absolute; inset: 8px; border-radius: 9px; overflow: hidden; background: radial-gradient(ellipse at 50% 12%, #fff6df 0%, #f2d8a6 40%, #b88e52 100%); box-shadow: inset 0 0 22px rgba(90,55,10,.5); }
.eg-shelf { position: absolute; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.55); box-shadow: 0 2px 4px rgba(90,55,10,.35); }
.eg-cake { position: absolute; left: 50%; top: 34%; width: 96px; margin-left: -48px; filter: drop-shadow(0 6px 6px rgba(60,30,0,.35)); }
.eg-note { position: absolute; right: -46px; top: 30px; width: 78px; padding: 7px 6px 8px; background: #FFE27A; color: #3A2A08; font: italic 700 12.5px/1.2 var(--serif); text-align: center; transform: rotate(6deg); box-shadow: 0 4px 10px rgba(0,0,0,.35); }
/* The door hangs open off the fridge's left edge; the viewer sees its inside. */
.eg-door { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 14px; background: linear-gradient(90deg, #1b2034, #2c3454); box-shadow: inset 0 0 0 1.5px rgba(234,227,215,.14); transform-origin: left center; transform: rotateY(-118deg); }
.eg-pop { position: absolute; opacity: 0; transform: scale(.4); transform-origin: 50% 100%; transition: opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.eg-pop.in { opacity: 1; transform: none; }
.eg-pop-id { width: 70px; left: calc(50% - 170px); bottom: 0; filter: drop-shadow(0 0 18px rgba(255,138,61,.45)); }
.eg-pop-ego { height: 100px; left: calc(50% + 100px); bottom: 0; filter: drop-shadow(0 0 16px rgba(234,227,215,.3)); }
.eg-pop-sup { width: 50px; left: calc(50% + 112px); top: 0; filter: drop-shadow(0 0 16px rgba(138,180,255,.4)); }
.btn.eg-hold-place { visibility: hidden; }

/* three thoughts */
.eg-thoughts { display: flex; flex-direction: column; gap: 10px; }
.eg-thought {
  position: relative; text-align: left; min-height: 50px; padding: 12px 16px 12px 18px; border-radius: 18px; font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.25;
  background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 #070a14; animation: egIn .4s cubic-bezier(.2,.8,.2,1) both;
  transition: border-color .2s, background .2s, transform .08s;
}
.eg-thought::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--c); }
.eg-thought:active { transform: translateY(3px); box-shadow: 0 1px 0 #070a14; }
.eg-thought.eg-id { --c: var(--eg-id); } .eg-thought.eg-ego { --c: var(--text); } .eg-thought.eg-sup { --c: var(--eg-sup); }
.eg-thoughts.done { pointer-events: none; }
.eg-thought.picked { border-color: var(--violet-bright); }
.eg-thought.named { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.eg-thought .nm {
  position: absolute; right: 12px; top: -11px; padding: 2px 9px; border-radius: 999px; background: var(--c); color: #10131c; white-space: nowrap;
  font: 600 11.5px var(--sans); opacity: 0; transform: translateY(6px) scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.eg-thought .nm b { font-weight: 800; }
.eg-thought .nm { font-size: 12.5px; }
.eg-thought.named .nm { opacity: 1; transform: none; }
@keyframes egIn { from { opacity: 0; transform: scale(.96); } }

/* the cast */
.eg-cast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; flex: none; }
.eg-who { --c: var(--text); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.eg-who.eg-id { --c: var(--eg-id); } .eg-who.eg-sup { --c: var(--eg-sup); }
.eg-say { min-height: 40px; display: flex; align-items: flex-end; justify-content: center; }
.eg-say span { display: inline-block; padding: 5px 9px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); font: 700 12.5px/1.2 var(--sans); text-align: center; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.eg-say.on span { opacity: 1; transform: none; }
.eg-say.say span { animation: egSay .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes egSay { from { transform: scale(.7); } }
.eg-pic { position: relative; height: 124px; width: 100%; display: grid; place-items: center; }
.eg-pic img { max-height: 124px; max-width: 104px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }
.eg-who.bump .eg-pic img { animation: egBump .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes egBump { from { transform: scale(.82); } }
.eg-veto {
  position: absolute; left: 50%; top: 50%; padding: 2px 8px; border: 3px solid var(--red); border-radius: 6px; color: #FF8A8A; background: rgba(46,11,11,.75);
  font: 800 15px var(--sans); letter-spacing: .12em; text-transform: uppercase; transform: translate(-50%, -50%) rotate(-12deg) scale(2); opacity: 0; transition: opacity .15s, transform .25s cubic-bezier(.5,1.8,.6,1);
}
.eg-who.vetoed .eg-veto { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
.eg-lab { font: 800 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c); }

/* tap a member of the cast */
.eg-who.tap { cursor: pointer; border-radius: 16px; outline: 2px dashed transparent; outline-offset: 2px; transition: outline-color .2s, opacity .3s; }
.eg-who.tap:not(.off) { outline-color: var(--line-strong); }
.eg-who.wrong { outline-color: var(--red); } .eg-who.off { opacity: .4; pointer-events: none; }
.eg-who.right { outline: 2px solid var(--mint); outline-offset: 2px; }

/* actions */
.eg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eg-acts .choice { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 58px; padding: 10px 12px; font-size: 14.5px; line-height: 1.2; }
.eg-acts .choice small { font-size: 11.5px; font-weight: 700; color: #FF8A8A; }
.eg-acts .choice.off { opacity: .75; }

/* the switch */
.eg-switch { display: flex; align-items: center; gap: 12px; margin: 16px auto 0; min-height: 48px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line-strong); font-weight: 700; font-size: 15px; transition: opacity .3s, border-color .2s; }
.eg-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--raised); transition: background .2s; }
.eg-track i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--dim); transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s; }
.eg-switch.on { border-color: var(--violet-bright); }
.eg-switch.on .eg-track { background: var(--violet); } .eg-switch.on .eg-track i { transform: translateX(18px); background: #fff; }
.eg-switch.gone { opacity: 0; pointer-events: none; }

/* sort */
.btn.eg-b { font-size: 13px; letter-spacing: .04em; }
.btn.eg-bid { background: var(--eg-id); color: var(--eg-id-ink); box-shadow: 0 5px 0 #B3521B; }
.btn.eg-bid:active { box-shadow: 0 1px 0 #B3521B; }
.btn.eg-bsup { background: var(--eg-sup); color: var(--eg-sup-ink); box-shadow: 0 5px 0 #4C6FB8; }
.btn.eg-bsup:active { box-shadow: 0 1px 0 #4C6FB8; }
.sortcard.eg-quote { font-size: 19px; font-weight: 500; }

/* horse and rider */
.eg-rider { display: flex; flex-direction: column; gap: 8px; flex: none; }
.eg-ride { position: relative; height: 200px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #1b2445 0%, #202a4a 55%, #1f3a2e 56%, #142a20 100%); }
.eg-road { position: absolute; inset: 0; width: 100%; height: 100%; }
.eg-road .r { fill: none; stroke: #6b5a45; stroke-width: 18px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.eg-road .c { fill: none; stroke: rgba(234,227,215,.28); stroke-width: 2px; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }
.eg-sign { position: absolute; right: 10px; padding: 3px 9px; border-radius: 6px; font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.eg-home { top: 10px; background: var(--text); color: #1a1a1a; }
.eg-bake { bottom: 38px; background: var(--eg-id); color: var(--eg-id-ink); }
.eg-horse { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.eg-horse img { position: absolute; left: -58px; bottom: -8px; width: 116px; transform-origin: 70% 90%; transform: rotate(var(--lean, 0deg)); transition: transform .25s; }
.eg-horse.run img { animation: egGallop .26s ease-in-out infinite alternate; }
.eg-horse.rear img { animation: none; transform: rotate(-24deg); transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
@keyframes egGallop { from { translate: 0 0; } to { translate: 0 -4px; } }
.eg-bub { position: absolute; left: -130px; bottom: 58px; width: 150px; padding: 6px 9px; border-radius: 12px; background: var(--text); color: #14161f; font: 700 12.5px/1.25 var(--sans); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.eg-bub::after { content: ""; position: absolute; left: 50%; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--text); }
.eg-bub.on { opacity: 1; transform: none; }
.eg-bub.said { animation: egSay .35s cubic-bezier(.34,1.56,.64,1); }
.eg-rider .eg-cap { display: flex; justify-content: space-between; font: 800 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.eg-cap .r { color: var(--text); } .eg-cap .h { color: var(--eg-id); }
.eg-rider blockquote { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--line-strong); font: italic 15px/1.35 var(--serif); color: var(--dim); }
.eg-rider cite { display: block; margin-top: 4px; font: normal 600 12px var(--mono); color: var(--faint); }
/* Home is the one thing to tap on the road. */
.eg-sign.eg-home { border: 0; cursor: pointer; }
.eg-sign.eg-tap { top: 8px; min-width: 88px; min-height: 44px; font-size: 14px; animation: egNudge 1.6s ease-in-out 3; }
.eg-sign.eg-home:disabled { opacity: 1; }
/* Three endings, one explanation each. */
.eg-ends { display: flex; flex-direction: column; gap: 10px; }
.eg-end { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); }
.eg-end span { font: 600 17px/1.3 var(--serif); color: var(--text); }
.eg-end b { font: 800 12.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-align: right; }
@keyframes egNudge { 50% { transform: scale(1.03); } }
@media (max-height: 700px) { .eg-ride { height: 160px; } .eg-rider blockquote { font-size: 13.5px; } .eg-kitchen { height: 168px; } .eg-fridge { transform: scale(.84); transform-origin: top center; } .eg-pop-id { width: 60px; } .eg-pop-ego { height: 84px; } }
@media (min-height: 800px) {
  .eg-kitchen { height: 236px; } .eg-fridge { transform: scale(1.2); transform-origin: top center; }
  .eg-pop-sup { left: calc(50% + 130px); width: 46px; } .eg-pop-ego { left: calc(50% + 120px); height: 110px; }
  .eg-ride { height: 230px; }
}

/* the word, and three roommates at the fridge */
.eg-words { display: flex; flex-direction: column; gap: 8px; }
.eg-word { display: grid; grid-template-columns: 1.2fr 1fr auto; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); }
.eg-word b { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.eg-word span { font-size: 14px; color: var(--dim); }
.eg-word i { font: normal 600 14px var(--mono); color: var(--violet-bright); }
.eg-word.me { border-color: var(--gold); background: rgba(252,192,80,.08); }
.eg-word.me i { color: var(--gold); }
.eg-mates { display: flex; flex-direction: column; gap: 10px; }
.eg-mate { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); transition: border-color .2s, opacity .3s, background .2s; }
.eg-mate img { width: 52px; height: 78px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.eg-mate b { font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.eg-mate p { margin: 2px 0 0; font-family: var(--serif); font-size: 16.5px; font-weight: 500; line-height: 1.25; }
.eg-mate em { display: block; max-height: 0; overflow: hidden; opacity: 0; font: normal 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); transition: max-height .3s, opacity .3s, margin .3s; }
.eg-mate.told em { max-height: 20px; opacity: 1; margin-top: 4px; }
.eg-mate.tap { cursor: pointer; }
.eg-mate.wrong { border-color: var(--red); } .eg-mate.off { opacity: .45; pointer-events: none; }
.eg-mate.right { border-color: var(--mint); background: rgba(63,214,154,.1); } .eg-mate.right em { color: var(--mint); }
@media (max-height: 700px) { .eg-mates { gap: 8px; } .eg-mate { padding: 5px 12px 5px 6px; } .eg-mate img { height: 54px; } .eg-mate p { font-size: 15px; } }

/* first and last screens */
.hero.eg-hero img { width: 270px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
@media (max-height: 700px) { .hero.eg-hero img { width: 200px; } }