/* 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; }

/* 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; }

/* 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; }
@media (max-height: 700px) { .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; }
}

/* three roommates at the fridge */
.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 screen */
.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; } }