.hd-director {
  --hd-gold:#e7c688;
  display:block; min-width:0; width:100%; margin:0;
  color:#f7eee0; border:1px solid #b3905a88; border-radius:10px;
  background:#211b1b; box-shadow:0 15px 45px #08060b4a;
}
.hd-director .hd-control { display:block;width:100%;padding:0;border:0;border-radius:9px;color:inherit;background:transparent;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent; }
.hd-director .hd-control:not(:disabled):hover .hd-action { color:#fff0d0;text-decoration:underline;text-underline-offset:3px; }
.hd-director .hd-portrait { position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:9px 9px 0 0;background:#211817; }
.hd-director[data-host="buzios"] .hd-control,.hd-director[data-host="vela"] .hd-control { touch-action:pinch-zoom; }
.hd-director .hd-control:disabled { cursor:default; }
.hd-director .hd-control:focus-visible { outline:3px solid #ffdb92;outline-offset:2px; }
.hd-director { position:relative; }
.hd-target-layer { position:absolute;top:0;left:0;right:0;aspect-ratio:16/9;pointer-events:none;z-index:4; }
.hd-target { --target-x:76.4%;--target-y:69.7%;display:grid;place-items:center;position:absolute;left:var(--target-x);top:var(--target-y);transform:translate(-50%,-50%);width:clamp(48px,13%,104px);aspect-ratio:1;padding:0;border-radius:50%;border:0;background:transparent;color:#f6d8a3;pointer-events:auto;touch-action:pinch-zoom;user-select:none;-webkit-tap-highlight-color:transparent; }
.hd-director[data-host=vela] .hd-target { --target-x:66.35%;--target-y:54.4%;width:clamp(46px,9%,78px); }
.hd-target::after { content:'';display:block;width:67%;aspect-ratio:1;border-radius:50%;border:1.5px solid #ffe3a4;box-shadow:0 0 0 1.5px #24150ee8,inset 0 0 0 1px #24150eba,0 0 10px #21150b88; }
.hd-target:hover::after,.hd-target:focus-visible::after,.bz-experience[data-phase=holding] .hd-target::after { border-style:solid;border-color:#ffdfa8;box-shadow:0 0 0 4px #f8bf7226,0 0 12px #ffc48177; }
.hd-target:focus-visible { outline:2px solid #ffe1a7;outline-offset:0; }
.hd-director[data-host=buzios] .hd-target { cursor:grab; }
.bz-experience[data-phase=holding] .hd-target { cursor:grabbing; }
.hd-target:not(:disabled):active::after { background:#ffcf9125; }
.hd-target[hidden] { display:none; }
.hd-targeted .hd-control,.hd-targeted .hd-control .hd-portrait { pointer-events:none; }
.hd-targeted .hd-control .hd-caption { pointer-events:auto; }
.hd-director[data-pose=waiting] .hd-props,.hd-director[data-pose=ending] .hd-props { display:none; }
.hd-portrait::before { content:'';position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 0 1px #e3ca9840;pointer-events:none; }
.hd-still,.hd-film,.hd-ambient { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none; }
.hd-film,.hd-ambient { opacity:0; }
.hd-director:is([data-ambient=idle],[data-ambient=fala]) .hd-ambient { opacity:1; }
.hd-director[data-media=video] .hd-film { opacity:1; }
.hd-caption { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:40px;padding:8px 12px;border-top:1px solid #ad8d5859;background:linear-gradient(100deg,#392c28,#251d25);border-radius:0 0 9px 9px;font-family:'DM Sans',sans-serif; }
.hd-label { color:#f1d7a5;font:500 18px/1.1 'Cormorant Garamond',Georgia,serif; }
.hd-action { color:#dbcaaf;font:500 11px/1.4 'DM Sans',sans-serif; }
.room-result-copy>.hd-director { margin-bottom:17px; }
.hd-props,.hd-prop { pointer-events:none; }
.hd-props { position:absolute;inset:0;z-index:2; }
.hd-prop { display:none;position:absolute; }
.hd-director[data-media=poster][data-host=taro][data-gesture=offer] .hd-prop {
  display:block;left:38%;top:63%;width:8%;aspect-ratio:.585;border-radius:6%;border:1px solid #d9b77b;
  background:#302032 url('assets/tarot-back.webp') center / 100% 100%;
  box-shadow:1px 2px 4px #180e14aa;transform-origin:38% 90%;animation:hd-offer .65s ease-out both;
}
.hd-director[data-media=poster][data-host=buzios]:is([data-gesture=gather],[data-gesture=release]) .hd-prop {
  display:block;width:5.4%;aspect-ratio:496/298;top:74%;left:80%;background:url('assets/cowrie-open.webp') center/contain no-repeat;
  filter:drop-shadow(0 2px 1px #211318a0);
}
.hd-director[data-host=buzios][data-media=poster][data-gesture=gather] .hd-prop { animation:hd-gather .55s ease-out both; }
.hd-director[data-host=buzios][data-media=poster][data-gesture=release] .hd-prop { animation:hd-release 1s calc(var(--hd-i)*55ms) ease-in both; }
.hd-director[data-media=poster][data-host=vela]:is([data-gesture=light],[data-gesture=gather]) .hd-prop {
  display:block;left:1%;top:52%;width:15%;height:30%;
  background:radial-gradient(ellipse,#fff3bc77,#ffbb452c 42%,transparent 74%);mix-blend-mode:screen;
  animation:hd-candles 1.65s ease-in-out infinite alternate;
}
@keyframes hd-offer { from { opacity:0;transform:translate(-19%,12%) scale(.72) rotate(-15deg); } to { opacity:1;transform:translate(8%,-24%) scale(1.05) rotate(-5deg); } }
@keyframes hd-gather { from { opacity:0;transform:translate(calc((var(--hd-i) - 1)*185%),115%) rotate(-30deg); } to { opacity:.95;transform:translate(calc((var(--hd-i) - 1)*33%),0) rotate(calc(var(--hd-i)*27deg)); } }
@keyframes hd-release { from { opacity:.95;transform:translate(calc((var(--hd-i) - 1)*33%),0) rotate(0); } 74% { opacity:1; } to { opacity:0;transform:translate(calc((var(--hd-i) - 2)*135%),235%) rotate(calc(var(--hd-i)*49deg + 68deg)); } }
@keyframes hd-candles { from{opacity:.4;} to{opacity:.95;} }

/* The guest meets the character before preparing the consultation. */
.room-welcome.room-hosted .room-welcome-inner {
  display:grid;grid-template-columns:minmax(255px,.78fr) minmax(0,1.22fr);align-items:center;
  gap:clamp(20px,3.7vw,70px);width:min(1360px,100%);min-height:calc(100dvh - 110px);margin:auto;
}
.room-hosted .room-invite { min-width:0; }
.room-hosted .hd-director { align-self:center; }
.room-dialog .room-tarot-stage .ttp.ttp-hosted {
  display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);
  grid-template-areas:'host board' 'host details';align-content:start;align-items:start;
  gap:12px 18px;padding:clamp(12px,2vw,28px);
  background:radial-gradient(ellipse at 13% 18%,#42302e57,transparent 68%),#201720;
}
.ttp-hosted .hd-director { grid-area:host;position:sticky;top:12px; }
.ttp-hosted .ttp-board { grid-area:board; min-width:0; height:clamp(355px,55vh,610px);min-height:355px;border:1px solid #795e48;border-radius:9px; }
.ttp-hosted .ttp-details { grid-area:details;min-width:0; }
.ttp-hosted .ttp-head { padding:16px 17px 0; }
.ttp-hosted .ttp-heading { font-size:clamp(24px,2.5vw,38px); }
.bz-hosted .bz-rail { gap:12px; }
.bz-hosted .hd-director { flex:none; }
.bz-hosted .hd-caption { min-height:29px;padding:5px 8px; }
.bz-hosted .hd-label { font-size:16px; }
.bz-hosted .hd-action { font-size:10.5px; }
.room-dialog .room-shell-cast .bz-experience.bz-hosted { grid-template-columns:minmax(0,1.25fr) minmax(275px,1fr); }
.rd-dialog[data-oracle=umbanda] .rd-body.rd-hosted {
  grid-template-columns:minmax(0,1.35fr) minmax(255px,.75fr);
  grid-template-areas:'host panel' 'host stage';align-content:center;align-items:end;
  gap:17px clamp(22px,3.1vw,49px);
}
.rd-hosted .hd-director { grid-area:host;align-self:center; }
.rd-hosted .rd-stage { align-self:start; }
.rd-hosted .rd-panel { padding:0; }
.rd-hosted .rd-plate { display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,1fr); }
.rd-hosted .rd-caption { min-height:0;padding:8px 10px; border-top:0; }
.rd-hosted .rd-image { align-self:center; }
@media (max-width:870px) {
  .room-welcome.room-hosted .room-welcome-inner { grid-template-columns:minmax(230px,.9fr) minmax(0,1fr);gap:16px; }
  .room-dialog .room-tarot-stage .ttp.ttp-hosted { grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr); gap:9px; }
}
@media (max-width:710px) {
  .room-welcome.room-hosted .room-welcome-inner { display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:15px;min-height:0; }
  .room-hosted .hd-director { order:-1;width:min(100%,550px); }
  .room-dialog .room-tarot-stage .ttp.ttp-hosted { grid-template-columns:1fr;grid-template-areas:'host' 'board' 'details';padding:10px; }
  .ttp-hosted .hd-director { position:static;width:min(100%,500px);margin-inline:auto; }
  .ttp-hosted .ttp-board { height:clamp(335px,48vh,450px);min-height:325px; }
  .bz-hosted .bz-rail { display:contents; }
  .room-dialog .room-shell-cast .bz-experience.bz-hosted { display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'host' 'board' 'main' 'bottom';gap:11px; }
  .bz-hosted .hd-director { grid-area:host;width:min(100%,500px);margin-inline:auto; }
  .bz-hosted .bz-board { grid-area:board; }
  .bz-hosted .bz-rail-main { grid-area:main; }
  .bz-hosted .bz-bottom { grid-area:bottom; }
  .rd-dialog[data-oracle=umbanda] .rd-body.rd-hosted { grid-template-columns:1fr;grid-template-areas:'host' 'panel' 'stage';align-content:center;gap:14px; }
  .rd-hosted .hd-director { width:min(100%,500px);margin-inline:auto; }
  .rd-hosted .rd-plate { grid-template-columns:minmax(90px,.56fr) minmax(0,1fr); }
  .hd-caption { min-height:32px;padding:5px 9px; }
  .hd-director.hd-targeted .hd-action { color:#f4dfbd;font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .hd-director *, .hd-director *::before, .hd-director *::after { animation:none!important;transition:none!important; }
  .hd-director .hd-props,.hd-director .hd-film,.hd-director .hd-ambient { display:none!important; }
}

.hc-welcome,.hc-exchange,.hc-reading { color:#f3e6d7;font:14px/1.55 'DM Sans',sans-serif; }
.hc-welcome { margin:10px 0 14px;padding:10px 12px 9px;border-left:2px solid #b99868;background:#241b20a1; }
.hc-line { padding:6px 0; }
.hc-line .hc-speaker { color:#e5c28c;font:600 10px/1.4 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.13em; }
.hc-line.hc-human .hc-speaker { color:#c8baca; }
.hc-line .hc-message { font:400 14px/1.55 'DM Sans',sans-serif;margin:4px 0 0;color:#f4e9dd;white-space:pre-line;overflow-wrap:anywhere; }
.hc-actions,.hc-voice { display:flex;align-items:center;flex-wrap:wrap;gap:7px 12px; }
.hc-voice { margin-top:4px; }
.hc-voice button,.hc-skip { cursor:pointer;background:none;border:0;padding:6px 0;color:#e5c28c;font:500 12px/1.4 'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:3px; }
.hc-voice .hc-mute { color:#c6bac4; }
.hc-voice-note:empty,.hc-exchange:empty { display:none; }
.host-result-listen{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:40px;padding:.5em 1em;border:1px solid #a7885b99;border-radius:2em;background:#241d29;color:#f2d8af;font:500 .82rem/1.3 var(--sans,'DM Sans',sans-serif);cursor:pointer}
.host-result-listen:hover,.host-result-listen:focus-visible,.host-result-listen[aria-pressed=true]{border-color:#e6c28e;background:#38293a}
.host-result-listen svg{width:16px;height:16px;fill:none;stroke:currentColor}
.hc-voice-note,.hc-wait { color:#c8baca;font:12px/1.45 'DM Sans',sans-serif; }
.hc-consent { color:#beafb9;font:11px/1.4 'DM Sans',sans-serif;margin:7px 0; }
.hc-actions { margin-top:10px; }
.hc-primary { cursor:pointer;min-height:38px;padding:8px 14px;color:#2d2219;border:1px solid #dbc194;border-radius:6px;background:#e0bf89;font:600 13px/1.4 'DM Sans',sans-serif; }
.hc-reading { margin:17px 0 12px;padding:13px 0;border-block:1px solid #6f5c516b; }
.hc-reading .hc-heading { margin:0 0 7px;color:#ecd3ab;font:500 24px/1.15 'Cormorant Garamond',Georgia,serif; }
.hc-follow { display:grid;gap:7px;margin-top:12px; }
.hc-follow .hc-primary { justify-self:start; }
.hc-field { display:block;width:100%;min-height:52px;padding:8px 10px;resize:vertical;background:#171318;color:#f5eada;border:1px solid #77625e;border-radius:6px;font:14px/1.45 'DM Sans',sans-serif; }
.room-invite:has(.hc-welcome) .room-invite-title { font-size:clamp(36px,4.2vw,69px); }
.room-invite .hc-welcome { max-width:44rem; }
.room-invite .room-question[hidden], .hc-follow[hidden], .hc-voice button[hidden] { display:none!important; }
.rd-dialog[data-candle-step=question] .rd-stage { display:none; }
.rd-dialog[data-candle-step=question] .rd-intro { display:none; }
.rd-dialog[data-candle-step=question] .rd-body.rd-hosted { grid-template-areas:'host panel'; }
.rd-dialog .rd-form .hc-primary { margin:8px 10px 0 0; }
.rd-dialog .hc-reading .hc-message { color:var(--rd-ink); }
@media(max-width:710px) {
  .rd-dialog[data-candle-step=question] .rd-body.rd-hosted { grid-template-areas:'host' 'panel'; }
  .hc-field { font-size:16px; }
}