.altar-invitation { display:flex; width:100%; text-align:left; align-items:center; gap:16px; margin:24px 0; padding:22px; border:1px solid var(--line); border-radius:20px; color:var(--ink); text-decoration:none; background:var(--cream, #f3eee4); }
.altar-invitation > span:first-child { font-size:32px; color:var(--clay); }
.altar-invitation > span:last-child { margin-left:auto; }
.altar-invitation strong, .altar-invitation small { display:block; }
.altar-invitation small { margin-top:5px; color:var(--muted); }
.altar-page { max-width:780px; margin:auto; }
.altar-heading { text-align:center; margin:16px auto 28px; }
.altar-heading h1 { font:400 clamp(38px,8vw,56px)/1.1 var(--serif); margin:8px 0 16px; }
.altar-heading > p:last-child, .altar-privacy, .altar-speak p { color:var(--muted); line-height:1.65; }
.altar-space { position:relative; isolation:isolate; padding:38px 16px 30px; border-radius:48% 48% 24px 24px; background:radial-gradient(ellipse at 50% 35%,#e9dfc9 0%,#f2ecdf 45%,#e9e4d9 100%); text-align:center; color:#32382e; }
.altar-centre { position:relative; max-width:340px; margin:auto; }
.altar-portrait { display:grid; place-items:center; width:72px; height:88px; margin:auto; border-radius:46% 46% 16px 16px; overflow:hidden; background:#ded5c0; color:#665f4f; font:400 25px var(--serif); border:1px solid #cec2a5; }
.altar-portrait img { width:100%; height:100%; object-fit:cover; }
.altar-centre > .altar-portrait { width:124px; height:150px; font-size:40px; box-shadow:0 0 64px 14px #fff8e480; }
.altar-centre .eyebrow { margin:20px 0 8px; color:#665f4f; }
.altar-centre h2 { font:400 30px/1.2 var(--serif); margin:0; overflow-wrap:anywhere; }
.altar-centre > p:last-child { font-size:14px; margin:10px 0 0; }
.altar-companions { display:flex; justify-content:center; gap:20px; margin:30px auto 0; max-width:480px; }
.altar-companion { flex:0 1 130px; min-width:0; }
.altar-companion h3 { font-size:14px; font-weight:500; overflow-wrap:anywhere; margin:12px 0 2px; }
.altar-companion .link-button { min-height:44px; font-size:12px; color:#5d604e; }
.altar-candle-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; margin:8px auto 0; min-width:100px; min-height:80px; padding:20px 12px 8px; border:0; border-radius:12px; background:transparent; color:inherit; font-size:12px; }
.altar-candle-action:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.altar-candle { display:block; position:relative; width:18px; height:38px; margin:8px auto 0; border-radius:4px 4px 2px 2px; background:linear-gradient(90deg,#c9bba0,#fff5da,#dccdb0); }
.altar-candle::before { content:''; position:absolute; width:2px; height:6px; left:8px; top:-5px; background:#645344; }
.altar-candle i { position:absolute; left:5px; top:-16px; width:8px; height:15px; border-radius:80% 20% 70% 30%; background:#fff2ba; box-shadow:0 0 28px 10px #f8d48a80; opacity:0; }
.altar-candle-action[aria-pressed="true"] .altar-candle i { opacity:1; }
.altar-space[data-lit="true"] { background:radial-gradient(ellipse at 50% 85%,#f6dfaa 0%,#f2ecdf 45%,#e9e4d9 100%); }
.altar-speak { text-align:center; padding:28px 0 16px; }
.altar-speak > button { min-width:180px; }
.altar-speak p { font-size:14px; margin:12px 0; }
.altar-invite { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }
.altar-invite summary { cursor:pointer; padding:8px 0; }
.altar-invite > p { line-height:1.65; color:var(--muted); font-size:14px; }
.altar-privacy { text-align:center; font-size:12px; max-width:460px; margin:28px auto 12px; }
.altar-empty { text-align:center; padding:40px 20px; background:#eee8dc; border-radius:24px; }
.altar-empty > span { font-size:56px; color:var(--clay); }
.altar-empty h2 { font:400 28px var(--serif); }
.altar-empty p { line-height:1.65; }
.altar-feedback { text-align:center; }
.altar-ritual-choice { margin-bottom:20px; }
@media (max-width:600px) {
  .altar-heading { margin:4px auto 18px; }
  .altar-heading .eyebrow { margin:0; }
  .altar-heading h1 { margin:6px 0 10px; }
  .altar-heading > p:last-child { margin:0; font-size:14px; }
  .altar-space { padding-top:24px; padding-bottom:20px; }
  .altar-centre > .altar-portrait { width:104px; height:124px; }
  .altar-centre .eyebrow { margin:12px 0 6px; }
  .altar-centre h2 { font-size:27px; }
  .altar-companions { margin-top:18px; }
  .altar-companion .altar-portrait { width:64px; height:76px; }
  .altar-candle { margin-top:8px; height:26px; }
  .altar-speak { padding:18px 0 12px; }
}

.altar-camera-choices { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0 0 24px; }
.altar-camera-view { position:fixed; inset:0; z-index:150; overflow:hidden; color:#fff8e9; background:#17201b; font-family:var(--sans); }
.altar-camera-view[data-mode="xr"] { background:transparent; }
.altar-camera-view:xr-overlay { background:transparent; }
.altar-camera-video, .altar-xr-canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.altar-camera-top { position:absolute; inset:0 0 auto; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 16px 20px; background:linear-gradient(#17201be8,#17201b00); font-size:14px; }
.altar-camera-bottom { position:absolute; inset:auto 0 0; z-index:2; padding:20px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(#17201b00,#17201bed 20%); }
.altar-camera-bottom > p { max-width:640px; margin:8px auto 12px; font-size:13px; line-height:1.5; text-align:center; }
.altar-camera-view .button--secondary { color:#fff8e9; background:#273d32; border:1px solid #abbba9; }
.altar-camera-view .button:disabled { opacity:.55; }
.altar-camera-view .button:not(.button--secondary) { background:#f1e5c9; color:#25382c; }
.altar-camera-stage { position:absolute; inset:84px 0 238px; }
.altar-camera-scene { position:absolute; width:min(300px,85vw); touch-action:none; cursor:grab; }
.altar-camera-scene:focus-visible { outline:2px dashed #fff0b6; outline-offset:4px; border-radius:16px; }
.altar-camera-scene .altar-space, .altar-camera-scene .altar-space[data-lit="true"] { padding:16px 12px 6px; color:#fff8e9; background:radial-gradient(ellipse,#27382b55,transparent 70%); border-radius:20px; }
.altar-camera-scene .altar-centre > .altar-portrait { width:80px; height:96px; }
.altar-camera-scene .altar-centre h2 { font-size:23px; text-shadow:0 1px 8px #17201b; }
.altar-camera-scene .altar-centre .eyebrow { color:#fff0b6; font-size:9px; margin:10px 0 6px; text-shadow:0 1px 8px #17201b; }
.altar-camera-scene .altar-centre > p:last-child { margin:6px 0; font-size:12px; text-shadow:0 1px 8px #17201b; }
.altar-camera-scene .altar-companions { gap:8px; margin-top:14px; }
.altar-camera-scene .altar-companion .altar-portrait { width:48px; height:58px; font-size:20px; }
.altar-camera-scene .altar-companion h3 { font-size:12px; text-shadow:0 1px 8px #17201b; }
.altar-camera-scene .altar-candle-action { margin-top:0; padding-top:12px; text-shadow:0 1px 6px #17201b; }
.altar-camera-placement { display:flex; align-items:center; justify-content:center; gap:14px; max-width:640px; margin:auto; }
.altar-camera-placement label { display:grid; min-width:0; flex:1; gap:3px; max-width:240px; font-size:12px; }
.altar-camera-placement input { width:100%; min-width:0; min-height:36px; accent-color:#e4c485; }
.altar-camera-actions { display:flex; align-items:center; justify-content:center; gap:24px; }
.altar-camera-actions > .altar-candle-action { margin:0; min-width:124px; }
.altar-camera-actions .altar-candle { height:26px; }
.altar-camera-view[data-mode="preview"] .altar-camera-actions .altar-candle { display:none; }
.altar-camera-view[data-mode="preview"] .altar-camera-actions .altar-candle-action { min-height:48px; padding:8px 12px; }
.altar-camera-view .button-row { justify-content:center; }
@media (max-height:550px) and (orientation:landscape) {
  .altar-camera-stage { right:270px; bottom:16px; top:64px; }
  .altar-camera-bottom { left:auto; top:64px; width:270px; overflow:auto; padding:8px 12px; background:#17201bd9; }
  .altar-camera-placement, .altar-camera-actions { flex-wrap:wrap; gap:8px; }
}
@media (max-width:380px) {
  .altar-companions { gap:8px; }
  .altar-companion .altar-portrait { width:60px; height:76px; }
  .altar-space { padding-left:10px; padding-right:10px; }
}

/* Optional transparent artwork, shared with the WebXR texture. */
.altar-space > .altar-decoration { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; user-select:none; object-fit:fill; }
.altar-decor-choices { border:0; padding:0; margin:22px 0 0; min-width:0; }
.altar-decor-choices legend { width:100%; text-align:center; font-size:13px; color:var(--muted); padding:0 0 12px; }
.altar-decor-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:470px; margin:auto; }
.altar-decor-options button { display:grid; gap:7px; justify-items:center; min-width:0; min-height:44px; padding:8px 3px; font:inherit; font-size:12px; color:var(--ink); border:1px solid var(--line); border-radius:14px; background:transparent; cursor:pointer; }
.altar-decor-options button[aria-pressed="true"] { border-color:var(--clay,#8a664c); box-shadow:inset 0 0 0 1px var(--clay,#8a664c); background:#ad956514; }
.altar-decor-options button:focus-visible { outline:2px solid var(--clay,#8a664c); outline-offset:3px; }
.altar-decor-swatch { display:grid; place-items:center; width:60px; height:52px; max-width:100%; border-radius:45% 45% 6px 6px; background:#637060; overflow:hidden; color:#efe6cd; font-size:24px; }
.altar-decor-swatch img { display:block; width:100%; height:100%; object-fit:fill; }
.altar-camera-decor { display:flex; align-items:center; justify-content:center; gap:12px; margin:10px auto 2px; font-size:12px; }
.altar-camera-decor select { min-height:44px; max-width:220px; padding:6px 12px; border:1px solid #abbba9; border-radius:10px; color:#fff8e9; background:#273d32; font:inherit; }
.altar-camera-decor select:focus-visible { outline:2px solid #fff0b6; outline-offset:3px; }
.altar-camera-view .altar-camera-stage { bottom:290px; }
@media (max-width:380px) { .altar-decor-options { gap:6px; } .altar-decor-options button { font-size:11px; } }
@media (max-height:550px) and (orientation:landscape) { .altar-camera-view .altar-camera-stage { bottom:16px; } }