.ce-stage{position:relative;min-height:280px;margin:8px 0 18px;border-radius:18px}
.ce-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;background:linear-gradient(180deg,transparent,rgba(161,94,43,.16));pointer-events:none}
.ce-stage-quiz{overflow:hidden;min-height:300px;margin:0 0 12px}
.ce-sprite{position:absolute;bottom:0;width:132px;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1}
.ce-sprite[data-ce-character="Ethyl"]{left:4%}
.ce-sprite[data-ce-character="Cletus"]{left:38%}
.ce-sprite[data-ce-character="Oakley"]{right:6%;width:112px}
.ce-figure{position:relative;width:108px;height:148px}
.ce-body{position:absolute;left:18px;right:18px;bottom:0;height:62px;border-radius:18px 18px 8px 8px;background:var(--teal,#1B5C52)}
.ce-sprite[data-ce-character="Cletus"] .ce-body{background:#3d4a46}
.ce-sprite[data-ce-character="Oakley"] .ce-body{left:28px;right:28px;height:36px;bottom:8px;border-radius:40%;background:#6b5344}
.ce-face{position:absolute;left:8px;top:0;width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:center 18%;border:3px solid var(--teal,#1B5C52);background:var(--cream,#F2E9D9);transition:transform .45s ease}
.ce-sprite[data-ce-character="Oakley"] .ce-face{object-position:center 40%;width:84px;height:84px;left:12px}
.ce-brows{position:absolute;left:22px;right:22px;top:22px;height:14px;display:flex;justify-content:space-between;pointer-events:none}
.ce-brows i{display:block;width:22px;height:5px;border-radius:4px;background:#2a241c;transform-origin:center}
.ce-name{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal,#1B5C52);text-align:center}
.ce-name.is-full{letter-spacing:0;text-transform:none;font-size:.68rem;line-height:1.25;max-width:9.5rem}
.ce-sprite{cursor:pointer}
.ce-sprite:focus-visible{outline:3px solid var(--teal,#1B5C52);outline-offset:4px;border-radius:16px}
.ce-sprite.is-evil-eye .ce-brows i:first-child{transform:translateY(5px) rotate(24deg)}
.ce-sprite.is-evil-eye .ce-brows i:last-child{transform:translateY(1px) rotate(-30deg)}
.ce-bubble{max-width:240px;margin:0;padding:8px 10px;border-radius:12px 12px 12px 4px;background:#fff;border:2px solid var(--copper,#A15E2B);font-size:.95rem;line-height:1.35;color:#302b26}
.ce-sprite.is-off{transform:translateX(80vw)}
.ce-sprite.is-walking{animation:ce-walk 1.15s ease-in-out forwards}
.ce-sprite.is-walking .ce-face{animation:ce-bob .22s ease-in-out 5}
.ce-face.is-look-question{transform:rotate(8deg) translateY(8px)}
.ce-face.is-look-ethyl{transform:rotate(-12deg) translateX(-6px)}
.ce-face.is-look-cletus{transform:rotate(11deg) translateX(6px)}
.ce-sprite.is-eye-roll .ce-face{animation:ce-roll .7s ease}
.ce-sprite.is-stare .ce-brows i:first-child{transform:translateY(2px) rotate(12deg)}
.ce-sprite.is-stare .ce-brows i:last-child{transform:translateY(2px) rotate(-14deg)}
.ce-sprite.is-one-tuft .ce-brows i:first-child{transform:translateY(-6px) rotate(-18deg)}
.ce-sprite.is-one-tuft .ce-brows i:last-child{transform:none}
@keyframes ce-walk{from{transform:translateX(78vw)}to{transform:translateX(0)}}
@keyframes ce-bob{50%{transform:translateY(-5px)}}
@keyframes ce-roll{40%{transform:rotate(-16deg) translateY(-3px)}100%{transform:none}}
@keyframes ce-wag{30%{transform:rotate(-7deg)}60%{transform:rotate(8deg)}100%{transform:none}}
@keyframes ce-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .ce-sprite.is-wag .ce-figure{animation:ce-wag .5s ease}
  .ce-stage:not(.ce-stage-quiz) .ce-sprite{animation:ce-arrive .45s ease both}
  .ce-stage:not(.ce-stage-quiz) .ce-sprite[data-ce-character="Cletus"]{animation-delay:.12s}
  .ce-stage:not(.ce-stage-quiz) .ce-sprite[data-ce-character="Oakley"]{animation-delay:.24s}
}
@media(max-width:700px){
  .ce-stage:not(.ce-stage-quiz){display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:0;padding-top:0}
  .ce-stage:not(.ce-stage-quiz)::after{display:none}
  .ce-stage:not(.ce-stage-quiz) .ce-sprite{position:relative;left:auto;right:auto;bottom:auto;width:32%}
  .ce-stage:not(.ce-stage-quiz) .ce-bubble{position:static;max-width:none;margin:0 0 6px;font-size:.78rem}
  .ce-stage-quiz{min-height:240px}
  .ce-sprite{width:104px}
  .ce-figure{width:88px;height:128px}
  .ce-face{width:76px;height:76px}
  .ce-stage-quiz .ce-sprite[data-ce-character="Cletus"]{left:34%}
  .ce-bubble{max-width:180px;font-size:.88rem}
  .ce-name.is-full{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .ce-sprite.is-walking,.ce-sprite.is-walking .ce-face,.ce-sprite.is-eye-roll .ce-face{animation:none}
  .ce-face{transition:none}
  .ce-sprite.is-off{transform:none}
  .is-nudged,.is-toppled,.is-crooked{animation:none!important;transform:none!important}
}
body.ce-living .ce-stage:not(.ce-stage-quiz){min-height:0}
.ce-house{position:fixed;inset:0;z-index:30;pointer-events:none}
.ce-house .ce-sprite{position:absolute;left:auto;right:auto;bottom:auto;width:120px;margin:0;animation:none;pointer-events:auto;z-index:1}
.ce-house .ce-bubble{max-width:min(220px,68vw)}
.ce-face.is-look-you{transform:rotate(-10deg) translateY(7px) scale(1.06)}
.ce-face.is-glance-down{transform:rotate(7deg) translateY(6px)}
.ce-face.is-glance-up{transform:rotate(-6deg) translateY(-3px)}
.ce-controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
body.ce-living:not(.ce-seated)>.ce-controls{position:fixed;left:12px;bottom:12px;z-index:40}
.ce-sound,.ce-hush{min-height:48px;padding:10px 16px;border-radius:999px;border:2px solid var(--teal,#1B5C52);background:#fffaf1;color:var(--teal,#1B5C52);font:inherit;font-weight:800;cursor:pointer;box-shadow:0 8px 18px rgba(48,43,38,.14)}
.ce-sound[aria-pressed="true"],.ce-hush[aria-pressed="true"]{background:var(--teal,#1B5C52);color:#fff}
.ce-sound:focus-visible,.ce-hush:focus-visible{outline:3px solid var(--teal,#1B5C52);outline-offset:3px}
html:has(body.ce-seated){height:100%;height:100dvh;overflow:hidden}
body.ce-seated{height:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.ce-seated .ce-scroll{flex:1 1 auto;min-height:0;overflow:auto}
body.ce-seated .ce-stage:not(.ce-stage-quiz){display:none}
.ce-porch{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--cream,#F2E9D9);border-top:2px solid var(--teal,#1B5C52)}
.ce-porch-line{margin:0;padding:8px 10px;border-radius:12px;background:#fff;border:2px solid var(--copper,#A15E2B);color:#1a1612;font-size:1.25rem;line-height:1.35;max-height:7.2em;overflow:auto}
.ce-porch-line[hidden]{display:none}
.ce-porch-who{display:block;margin-bottom:2px;font-size:1.05rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--teal,#1B5C52)}
.ce-porch-cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:end}
.ce-porch .ce-sprite{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;margin:0;transform:none;animation:none}
.ce-porch .ce-name{font-size:1rem;line-height:1.2}
.ce-porch .ce-body{display:none}
.ce-porch .ce-figure{width:68px;height:68px;margin:0 auto}
.ce-porch .ce-sprite .ce-face{position:relative;left:auto;top:auto;width:68px;height:68px}
.ce-porch .ce-sprite.is-talking .ce-face{box-shadow:0 0 0 3px var(--copper,#A15E2B)}
.ce-porch .ce-name.is-full{max-width:none;overflow-wrap:anywhere}
.ce-porch.is-quiet .ce-sprite:not([data-ce-character="Oakley"]){opacity:.55}
@media(max-width:700px){
  .ce-porch .ce-figure,.ce-porch .ce-sprite .ce-face{width:56px;height:56px}
  .ce-porch-line{font-size:1.25rem}
}
@media(prefers-reduced-motion:no-preference){
  .is-nudged{animation:ce-nudge .9s ease}
  .is-toppled{animation:ce-topple 1s ease}
  .is-crooked{animation:ce-crook .7s ease forwards}
}
@keyframes ce-nudge{
  20%{transform:rotate(-3.5deg) translateX(8px)}
  50%{transform:rotate(2.5deg) translateY(6px)}
  75%{transform:rotate(-1deg)}
  100%{transform:none}
}
@keyframes ce-topple{
  30%{transform:translateY(16px) rotate(7deg)}
  55%{transform:translateY(-8px) rotate(-3deg)}
  100%{transform:none}
}
@keyframes ce-crook{to{transform:rotate(-6deg)}}
@media print{
  .ce-house,.ce-porch,.ce-controls,.ce-hush,.ce-sound{display:none!important}
  html:has(body.ce-seated),body.ce-seated{height:auto!important;overflow:visible!important;display:block!important}
  body.ce-seated .ce-scroll{overflow:visible!important;height:auto!important}
  .is-crooked,.is-nudged,.is-toppled{animation:none!important;transform:none!important}
}