/* Portable full-viewport Amber scenery. Load once; styling is scoped to .amber-host. */
.amber-host { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; background: #100b06; color: #fff7e7; color-scheme: dark; }
.amber-host .amber-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgb(5 3 2 / calc(.84 - var(--amber-energy, 0) * .50)),rgb(5 3 2 / calc(.84 - var(--amber-energy, 0) * .50))), url('./assets/amber-frozen.webp') center / cover; }
.amber-host .amber-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; contain: strict; z-index:2; }
.amber-host .amber-scene[hidden], .amber-host .amber-scene canvas[hidden] { display: none !important; }
.amber-host [data-amber-surface] { color: #fff7e7; background: #160f09ee; border: 1px solid #b88e5570; border-radius: 1rem; padding: 1.4rem; }
.amber-host [data-amber-surface] :is(button,select,input,textarea) { color: #fff7e7; background: #22170e; border: 1px solid #b88e55; border-radius: .4rem; font: inherit; }
.amber-host [data-amber-surface] button { min-height: 44px; padding: .5rem .85rem; cursor: pointer; }
.amber-host [data-amber-surface] :is(a,summary) { color: #ffe4ac; }
.amber-host :is(dialog,[role=menu],[role=listbox],option,optgroup) { color: #fff7e7; background: #160f09; }
.amber-host :focus-visible { outline: 2px solid #fff1c6; outline-offset: 3px; }
@media (max-aspect-ratio: 4/5) { .amber-host .amber-scene { background: linear-gradient(rgb(5 3 2 / calc(.84 - var(--amber-energy, 0) * .50)),rgb(5 3 2 / calc(.84 - var(--amber-energy, 0) * .50))), url('./assets/amber-frozen-mobile.webp') center / contain no-repeat; background-color: #100b06; } }
@media (prefers-reduced-motion: reduce) { .amber-host .amber-scene canvas { display: none !important; } }

.amber-host .amber-distant-camp{position:absolute;height:auto;pointer-events:none;opacity:.86;z-index:1;transform-origin:60% 75%}

@media(prefers-reduced-motion:reduce){.amber-host .amber-distant-camp{animation:none}}

.amber-camp-person{clip-path:inset(0 49% 0 0);transform-origin:41% 75%!important}.amber-camp-flames{clip-path:inset(0 0 0 49%)}