#screen-elements.active{position:fixed;inset:0;z-index:80;display:block;background:#020608;color:#f4f1e9;overflow:hidden}
.elemental-shell{position:relative;width:100%;height:100%;min-height:100dvh;background:#020608;overflow:hidden}
.elemental-topbar{position:absolute;z-index:12;left:24px;right:24px;top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;pointer-events:none}
.elemental-back{justify-self:start;display:inline-flex;align-items:center;gap:8px}
.elemental-room-nav{display:none}
.elemental-back,.elemental-hall-back{pointer-events:auto;min-height:42px;border:1px solid rgba(200,225,235,.25);border-radius:6px;background:rgba(3,9,13,.78);color:#eef4f4;padding:0 15px;cursor:pointer;backdrop-filter:blur(12px)}
.elemental-room-title{text-align:center;text-shadow:0 2px 22px #000}.elemental-room-title span{display:block;color:#a9c2cc;font-size:10px;letter-spacing:.22em;text-transform:uppercase}.elemental-room-title strong{display:block;margin-top:5px;font-family:Georgia,"Times New Roman",serif;font-size:28px;font-weight:500;letter-spacing:0}
.elemental-status{position:absolute;z-index:10;inset:auto 24px 22px;text-align:center;color:#c8d7dc}
.elemental-viewport{width:100%;height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(130,190,210,.35) transparent}
.elemental-scene{position:relative;width:100%;height:100%;min-width:900px;min-height:650px;background-position:center;background-repeat:no-repeat;background-size:cover;isolation:isolate;transition:background-image .35s ease}
.elemental-scene:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,5,8,.2),transparent 28%,transparent 68%,rgba(1,5,8,.55)),radial-gradient(circle at 50% 48%,transparent 30%,rgba(1,5,8,.38) 100%);pointer-events:none}
.elemental-scene.is-antechamber{background-size:contain}
.elemental-doors{position:absolute;left:0;top:0;width:100%;height:100%}.elemental-door{position:absolute;top:10%;height:61%;width:18%;border:0;background:transparent;color:#fff;cursor:pointer;text-shadow:0 2px 9px #000;transition:transform .25s ease,filter .25s ease}.elemental-door:before{content:"";position:absolute;inset:6% 7%;border:1px solid transparent;border-radius:45% 45% 8px 8px;transition:border-color .25s ease,box-shadow .25s ease}.elemental-door:hover,.elemental-door:focus-visible{transform:translateY(-4px);filter:brightness(1.17)}.elemental-door:hover:before,.elemental-door:focus-visible:before{border-color:var(--element-accent);box-shadow:0 0 28px color-mix(in srgb,var(--element-accent) 45%,transparent),inset 0 0 35px rgba(0,0,0,.2)}
.elemental-keeper{position:absolute;z-index:2;left:50%;bottom:14%;width:min(27vw,320px);height:auto;transform:translateX(-50%);pointer-events:none;opacity:.92;filter:drop-shadow(0 18px 28px rgba(0,0,0,.68));animation:elementalKeeperBreath 7s ease-in-out infinite}.is-room .elemental-keeper{display:none}
.elemental-wolf{position:absolute;z-index:2;left:calc(50% + min(8.1vw,96px));bottom:calc(14% + 22px);width:min(13vw,155px);height:auto;pointer-events:none;filter:drop-shadow(0 10px 16px rgba(0,0,0,.65))}.is-room .elemental-wolf{display:none}
.elemental-door span,.elemental-door strong,.elemental-door small{position:absolute;left:50%;transform:translateX(-50%)}.elemental-door-mark{bottom:9%;font-size:30px;color:var(--element-accent)}.elemental-door strong{bottom:3%;font:500 21px Georgia,"Times New Roman",serif;letter-spacing:0}.elemental-door small{bottom:-1%;color:#bed0d5;font-size:10px;letter-spacing:.16em;text-transform:uppercase}.door-fire{left:1.5%}.door-air{left:23.5%}.door-water{left:58%}.door-earth{left:80.5%}
.elemental-source{position:absolute;z-index:5;left:50%;bottom:5.5%;transform:translateX(-50%);width:min(360px,35vw);min-height:70px;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;align-items:center;padding:11px 15px;border:1px solid rgba(220,225,210,.24);border-radius:50%;background:rgba(2,8,11,.68);backdrop-filter:blur(10px);text-align:left;box-shadow:0 10px 45px rgba(0,0,0,.45)}.elemental-source>span{grid-row:1/3;font-size:27px;text-align:center;color:#e5c787}.elemental-source strong{font:500 16px Georgia,"Times New Roman",serif}.elemental-source small{color:#b9c8cb;font-size:11px;line-height:1.3;letter-spacing:0}
.is-room .elemental-source{top:12%;bottom:auto;width:min(470px,42vw);border-radius:8px;background:rgba(2,7,10,.58)}
.elemental-hall-back{position:absolute;z-index:8;left:24px;top:75px;display:none}.is-room .elemental-hall-back{display:block}
.elemental-stages{position:absolute;z-index:6;inset:0;pointer-events:none}.elemental-step{--y:calc(88% - var(--step-index)*6.6%);position:absolute;left:calc(50% + (var(--step-index) - 4)*.35%);top:var(--y);width:48px;height:48px;transform:translate(-50%,-50%);display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--element-accent) 60%,transparent);border-radius:50%;background:rgba(3,8,11,.76);color:#f4f3ec;box-shadow:0 0 18px rgba(0,0,0,.55);cursor:pointer;pointer-events:auto;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.elemental-step strong{font:600 16px Georgia,serif}.elemental-step span{position:absolute;left:56px;white-space:nowrap;color:#d8e4e6;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .2s ease}.elemental-step:hover,.elemental-step:focus-visible,.elemental-step.active{transform:translate(-50%,-50%) scale(1.16);background:color-mix(in srgb,var(--element-accent) 30%,#071016);box-shadow:0 0 28px color-mix(in srgb,var(--element-accent) 45%,transparent)}.elemental-step:hover span,.elemental-step:focus-visible span,.elemental-step.active span{opacity:1}
.elemental-panel{position:absolute;z-index:15;right:18px;top:82px;bottom:18px;width:min(430px,38vw);overflow:auto;transform:translateX(calc(100% + 36px));transition:transform .32s ease;border:1px solid rgba(170,210,225,.2);border-radius:8px;background:rgba(3,9,14,.94);box-shadow:-16px 0 60px rgba(0,0,0,.48);backdrop-filter:blur(16px)}.elemental-panel.is-open{transform:translateX(0)}
.elemental-study{position:relative;padding:24px}.elemental-panel-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;background:transparent;color:#dce7e9;font-size:26px;cursor:pointer}.elemental-study-head{display:grid;grid-template-columns:88px 1fr;gap:16px;padding-right:28px;align-items:start}.elemental-study-head img{width:88px;aspect-ratio:2/3;object-fit:cover;border:1px solid color-mix(in srgb,var(--element-accent) 55%,transparent);border-radius:4px}.elemental-study-head small{color:var(--element-accent);font-size:9px;letter-spacing:.16em;text-transform:uppercase}.elemental-study-head h3{margin:7px 0 8px;font:500 24px/1.08 Georgia,serif}.elemental-study-head p{margin:0;color:#c4d0d2;font-size:13px;line-height:1.5}.elemental-meaning{margin:22px 0}.elemental-meaning>div{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 0;border-top:1px solid rgba(180,210,220,.12)}.elemental-meaning dt{color:#90a9b2;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.elemental-meaning dd{margin:0;font-size:13px;line-height:1.48}.elemental-prompts{display:flex;gap:7px;overflow:auto;padding-bottom:6px}.elemental-prompts button{flex:0 0 auto;min-height:36px;border:1px solid rgba(180,210,220,.18);border-radius:5px;background:rgba(255,255,255,.035);color:#d9e3e4;padding:0 10px;font-size:11px;cursor:pointer}.elemental-messages{display:grid;gap:10px;max-height:260px;overflow:auto;margin-top:15px;padding:12px 2px}.elemental-message{padding:10px 12px;border-left:2px solid rgba(160,195,207,.25);font-size:13px;line-height:1.55}.elemental-message.user{margin-left:28px;background:rgba(255,255,255,.035)}.elemental-message.oracle{border-left-color:var(--element-accent);background:rgba(0,0,0,.18)}.elemental-dialogue-empty,.elemental-model-note{color:#879ba2;font-size:10px;line-height:1.5}.elemental-question{display:grid;grid-template-columns:1fr 42px;gap:8px}.elemental-question textarea{min-height:72px;resize:vertical;border-radius:5px;padding:11px;background:#071018}.elemental-question button{border:1px solid color-mix(in srgb,var(--element-accent) 50%,transparent);border-radius:5px;background:color-mix(in srgb,var(--element-accent) 22%,#071018);color:#fff;font-size:20px;cursor:pointer}
@media(max-width:900px){.elemental-topbar{left:12px;right:12px;top:10px}.elemental-room-title strong{font-size:21px}.elemental-room-title span{font-size:8px}.elemental-back{padding:0 10px;font-size:12px}.elemental-scene{width:980px;min-width:980px;height:100%;min-height:680px}.elemental-door{top:12%;height:60%}.elemental-source{bottom:9%;width:310px}.is-room .elemental-source{top:116px;width:330px}.elemental-hall-back{position:fixed;left:12px;top:64px}.elemental-panel{position:fixed;inset:92px 8px 8px;width:auto;border-radius:7px;transform:translateY(calc(100% + 110px))}.elemental-panel.is-open{transform:translateY(0)}.elemental-step span{display:none}.elemental-study{padding:18px}.elemental-study-head{grid-template-columns:74px 1fr}.elemental-study-head img{width:74px}.elemental-message{font-size:14px}.elemental-viewport{scroll-behavior:smooth}}
@media(prefers-reduced-motion:reduce){.elemental-scene,.elemental-panel,.elemental-door,.elemental-step{transition:none}}
@keyframes elementalKeeperBreath{0%,100%{transform:translateX(-50%) translateY(0);opacity:.88}50%{transform:translateX(-50%) translateY(-4px);opacity:.96}}
@media(max-width:900px){.elemental-keeper{width:245px;bottom:18%}}
@media(max-width:900px){.elemental-wolf{left:calc(50% + 73px);bottom:calc(18% + 17px);width:120px}}
@media(prefers-reduced-motion:reduce){.elemental-keeper{animation:none}}
@media(max-width:900px){
  .elemental-room-nav{position:absolute;z-index:12;top:calc(64px + env(safe-area-inset-top,0px));left:12px;right:12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#061017;border:1px solid rgba(155,217,255,.24);border-radius:6px;overflow:hidden}
  .elemental-room-nav:empty{display:none}
  .elemental-room-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:48px;padding:5px 2px;border:0;border-right:1px solid rgba(155,217,255,.14);background:transparent;color:#e7eff2;font:inherit;font-size:12px;cursor:pointer}
  .elemental-room-nav button:last-child{border-right:0}
  .elemental-room-nav button:focus-visible{outline:2px solid #b8e4fa;outline-offset:-3px}
  .elemental-room-nav button span{font-size:16px;line-height:18px}
  .elemental-topbar{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;top:calc(10px + env(safe-area-inset-top,0px))}
  .elemental-back{width:44px;min-height:44px;justify-content:center;padding:0}
  .elemental-back span:last-child{display:none}
  .elemental-hall-back{top:calc(64px + env(safe-area-inset-top,0px));min-height:44px}
  .elemental-panel{top:calc(112px + env(safe-area-inset-top,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .elemental-panel-close{width:44px;height:44px}
  .elemental-prompts{flex-wrap:wrap;overflow:visible}
  .elemental-prompts button{min-height:44px;font-size:12px;max-width:100%;white-space:normal;padding:8px 10px}
  .elemental-question{grid-template-columns:minmax(0,1fr) 44px}
  .elemental-question textarea{min-width:0;font-size:16px}
  .elemental-step{width:44px;height:44px}
  .is-antechamber .elemental-door strong{bottom:23%}
  .is-antechamber .elemental-door-mark{bottom:29%}
  .is-antechamber .elemental-door small{bottom:19%}
}