/* A quiet layer of encounters, above the sculpture and below the poem. */
#encounters{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.summon{z-index:-1;transition:opacity .5s,border-color .6s}.oracle-active .summon{opacity:0;pointer-events:none}
.face-targets{position:absolute;inset:0;z-index:1;pointer-events:none}.face-target{position:absolute;left:0;top:0;border-radius:50%;clip-path:circle(50%);pointer-events:auto;touch-action:none;cursor:grab}
.encounter-tools{position:absolute;right:4vw;top:114px;z-index:5;display:flex;align-items:center;gap:10px;font:10px monospace;letter-spacing:1px}
.encounter-tools button,.listen-poem{border:1px solid var(--rule);border-radius:30px;background:#11161375;backdrop-filter:blur(14px);padding:12px 16px;min-height:44px;font:10px monospace;letter-spacing:1px;transition:border-color .3s,background .3s}
.encounter-tools button:hover,.listen-poem:hover{border-color:var(--accent);background:#b7c9ca14}
.encounter-count{opacity:.85;margin-right:3px;font-variant-numeric:tabular-nums;white-space:nowrap;padding:10px 11px;background:#101713c9;border-radius:24px}
.listen-poem{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;margin-top:20px;color:var(--paper);padding:10px 17px}
.listen-poem i{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
[data-speech-state="speaking"] .listen-poem i{animation:voice-pulse 1s ease-in-out infinite}
.encounter-hint{position:absolute;right:4vw;bottom:145px;font:9px monospace;letter-spacing:2px;color:var(--muted);opacity:.65;pointer-events:none;z-index:4}
#voice{width:auto;min-width:92px;border-radius:25px;display:flex;gap:8px;padding:0 13px}
#voice svg{width:15px;height:18px}.voice-label{font:9px monospace;letter-spacing:.5px;white-space:nowrap}
.encounter-tools [aria-pressed="false"]{opacity:.5}
.faces-dialog{width:min(1120px,94vw);max-width:94vw;max-height:88svh;border:1px solid #b6c7ca40;border-radius:18px;padding:0;background:#101514f7;color:var(--paper);box-shadow:0 30px 100px #000b;scrollbar-color:#718a89 #111;overscroll-behavior:contain}
.faces-dialog::backdrop{background:#030807c9;backdrop-filter:blur(18px)}
.faces-dialog header{position:sticky;inset:auto;top:0;background:#101514f5;padding:24px 26px;display:flex;gap:20px;align-items:center;border-bottom:1px solid var(--rule);z-index:2}
.faces-dialog h2{font:italic clamp(24px,4vw,40px) Georgia,serif;font-weight:400;letter-spacing:-1px;margin:0}
.faces-dialog header p{font:9px monospace;color:var(--muted);letter-spacing:1px;margin:9px 0 0}
.faces-dialog .close-faces{margin-left:auto;flex-shrink:0;border:1px solid var(--rule);border-radius:50%;width:44px;height:44px;background:transparent;font:23px Georgia,serif}
.faces-grid{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:9px;padding:24px}
.face-choice{position:relative;aspect-ratio:1/1.17;border:1px solid #d6e6dd15;border-radius:10px;background:radial-gradient(ellipse at 50% 35%,#95b4af12,transparent 72%);overflow:hidden;padding:0;transition:background .3s,border-color .3s,transform .3s}
.face-choice:hover,.face-choice:focus-visible{border-color:#d9dfca90;transform:translateY(-3px);background:#a6bbbc18}
.face-choice .portrait{position:absolute;inset:4px 0 18px;background-image:url('./faces-atlas.png');background-repeat:no-repeat;background-size:800% 700%;filter:saturate(.75);opacity:.95;mask-image:linear-gradient(transparent,black 5%,black 85%,transparent)}
.face-choice span:last-child{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:8px monospace;letter-spacing:1px;color:var(--muted)}
.face-choice[data-seen="true"]{border-color:#a9d6ca55}.face-choice[data-seen="true"] span:last-child{color:#c6e4d9}
.faces-dialog .gallery-note{margin:0;padding:0 26px 25px;font:11px Georgia,serif;color:var(--muted)}
@keyframes voice-pulse{50%{opacity:.35;transform:scale(.7)}}
@media(max-width:800px){.encounter-tools{left:24px;right:24px;top:86px;justify-content:flex-end;gap:7px}.encounter-tools button{font-size:9px;padding:9px 11px}.encounter-count{font-size:9px;margin-right:auto;letter-spacing:.3px}.encounter-hint{right:24px;bottom:126px;font-size:8px;letter-spacing:1px}.poetry{bottom:21%;}.listen-poem{margin-top:13px;font-size:9px;min-height:40px;padding:8px 13px}.faces-grid{grid-template-columns:repeat(7,minmax(0,1fr));padding:18px;gap:7px}.faces-dialog header{padding:20px}.transport{gap:7px}#voice{min-width:76px;padding:0 10px;gap:5px}.voice-label{font-size:8px}}
@media(max-width:480px){.encounter-tools{top:79px}.encounter-tools button{padding:8px 10px;min-height:40px}.encounter-count{font-size:8px}.encounter-hint{bottom:115px;font-size:7px;letter-spacing:.6px}.poetry{bottom:22%;}h1{font-size:clamp(54px,14vw,76px)}.poem-index{margin-bottom:14px}#whisper{font-size:15px;margin-top:16px;max-width:28ch}.movements{gap:2px}.movements button{min-width:35px;gap:6px}.transport{gap:6px}footer{gap:10px}.serial{display:none}#voice{min-width:76px}.faces-grid{grid-template-columns:repeat(5,minmax(0,1fr));padding:12px;gap:6px}.faces-dialog header{padding:17px;gap:8px}.faces-dialog h2{font-size:26px}.faces-dialog header p{font-size:8px}.faces-dialog .gallery-note{padding:0 17px 20px}.faces-dialog{max-height:90svh}}
@media(max-height:620px) and (min-width:600px){.encounter-tools{top:80px}.poetry{bottom:22%}h1{font-size:clamp(48px,9vh,68px)}#whisper{margin-top:12px;font-size:14px}.listen-poem{margin-top:9px;min-height:36px;padding:7px 12px}.encounter-hint{bottom:100px}}
@media(prefers-reduced-motion:reduce){.face-choice,.encounter-tools button,.listen-poem{transition:none}.face-choice:hover{transform:none}.listen-poem i{animation:none!important}}
