.fire-atelier[hidden] { display: none; }
.hearth-identity { position:fixed; top:var(--hearth-title-top); left:50%; transform:translateX(-50%); z-index:48; display:flex; align-items:center; gap:7px; max-width:calc(100vw - 24px); }
.hearth-identity[hidden] { display:none; }
.hearth-fire-name { width:max-content; max-width:calc(100vw - 122px); margin:0; padding:8px 14px; overflow:hidden; overflow-wrap:normal; border:1px solid rgba(255,222,174,.12); border-radius:20px; color:#ffe7c2; background:radial-gradient(ellipse,#160e1ccc,rgba(12,8,17,.42)); box-shadow:0 8px 28px rgba(0,0,0,.18); font:700 clamp(16px,4.4vw,24px)/1.3 Nunito,sans-serif; text-align:center; white-space:nowrap; text-overflow:ellipsis; text-wrap:nowrap; text-shadow:0 2px 16px #000,0 0 28px #000; pointer-events:none; }
.hearth-quick-actions { display:flex; gap:5px; padding:3px; border:1px solid rgba(255,222,174,.15); border-radius:17px; background:rgba(12,8,17,.66); box-shadow:0 8px 28px rgba(0,0,0,.22); backdrop-filter:blur(12px); }
.hearth-quick-actions button { display:grid; place-items:center; width:42px; min-width:42px; height:42px; padding:0; border:0; border-radius:13px; color:#ffe9c8; background:rgba(255,255,255,.07); font-size:19px; cursor:pointer; touch-action:manipulation; }
.hearth-quick-actions button:active { transform:scale(.94); background:rgba(255,190,116,.16); }
.hearth-quick-actions button:focus-visible { outline:3px solid #ffe1a9; outline-offset:2px; }
body.atelier-open .hearth-identity { top:82px; }
body.atelier-open .hearth-fire-name { font-size:18px; }
body.atelier-open .hearth-quick-actions { display:none; }
.fire-atelier { position: fixed; inset: 0; z-index: 15000; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(transparent 10%, #090a1677 45%, #090a16d9); color: #fff5e6; font: 16px/1.4 Nunito, sans-serif; }
.atelier-sheet { width: min(640px,100%); max-height: 60dvh; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; padding: 22px 22px max(22px,env(safe-area-inset-bottom)); border: 1px solid #ffdb9b40; border-radius: 28px 28px 0 0; background: linear-gradient(140deg,#242134ed,#11121df5); box-shadow: 0 -18px 80px #0006; }
/* Move the existing rendered hearth into the try-on window. No duplicate GPU scene. */
body.atelier-open #fireWebglCanvas { bottom: 57dvh; transform: translateX(-50%) scale(.67); transform-origin: center bottom; }
body.atelier-open #hearthMemoryTrigger, body.atelier-open .hearth-status-dock { visibility: hidden; }
.atelier-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.atelier-header h2 { font: 800 clamp(21px,5vw,28px)/1.15 Nunito,sans-serif; margin: 3px 0 0; }
.atelier-eyebrow { font-size: 12px; letter-spacing: .14em; color: #f3ce95; margin: 0; }
.fire-atelier button { font: 700 14px/1.3 Nunito,sans-serif; cursor: pointer; min-height: 48px; border: 1px solid #ffffff30; color: #fff5e6; border-radius: 14px; background: #ffffff09; }
.fire-atelier button:focus-visible,.fire-atelier input:focus-visible { outline: 3px solid #ffe1a9; outline-offset: 3px; }
.fire-atelier button:disabled { cursor: default; opacity: .62; }
.fire-atelier .atelier-close { min-width: 48px; flex-shrink: 0; }
.atelier-intro { margin: 10px 0 16px; color: #dbd0df; font-size: 14px; }
.atelier-shelves { display:grid; gap:18px; }
.atelier-shelf { min-width:0; overflow:hidden; }
.atelier-shelf > header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 8px; }
.atelier-shelf > header > div { min-width:0; }
.atelier-shelf > header h3 { margin:0; color:#ffe6bb; font:800 15px/1.2 Nunito,sans-serif; }
.atelier-shelf > header span { display:block; color:#bdb2c8; font-size:11px; }
.atelier-carousel-nav { display:flex; flex:0 0 auto; gap:6px; }
.fire-atelier .atelier-carousel-nav button { width:40px; min-height:40px; padding:0; border-radius:12px; font-size:24px; line-height:1; }
.atelier-collection { display:flex; width:100%; max-width:100%; gap:9px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-inline:contain; padding:2px 2px 8px; }
.atelier-collection::-webkit-scrollbar { display:none; }
.atelier-collection button { flex:0 0 126px; padding:0 0 10px; overflow:hidden; scroll-snap-align:start; text-align:center; transition:border-color .18s,background .18s; }
.atelier-collection button[aria-pressed=true] { border-color: #ffe1a9; background: #fff1d611; box-shadow: 0 0 0 1px #ffe1a9; }
.atelier-collection button.is-detail-selection { outline:2px solid rgba(255,225,169,.42); outline-offset:-5px; }
.atelier-card-name { display: block; padding: 0 4px; }
.atelier-card-price { display:block; min-height:16px; margin-top:4px; padding:0 4px; color:#cfc4d8; font-size:10px; font-weight:700; }
.atelier-collection button.is-owned .atelier-card-price { color:#96e5b7; }
.atelier-art { display: grid; place-items: center; position: relative; height: 108px; overflow: hidden; background: radial-gradient(ellipse at 50% 110%,var(--glow),transparent 70%); }
.atelier-art.has-image { background:#100b1b; }
.atelier-art img { display:block; width:100%; height:100%; object-fit:cover; }
.atelier-art-classic { --glow:#ff9d3277; --flame:#ffd08a; }
.atelier-art-aurora { --glow:#39e6ab77; --flame:#7affcb; }
.atelier-art-rose { --glow:#ff579f77; --flame:#ff88b7; }
.atelier-art-celestial { --glow:#6768ff88; --flame:#a3a0ff; }
.atelier-art-wood { --glow:#d77a2f66; --flame:#d69055; }
.atelier-art-log-rainbow { --glow:#f36bff77; --flame:#8bfff1; background:linear-gradient(135deg,#ff657522,#ffd15a22,#72ef9e22,#66a9ff22,#c779ff22); }
.atelier-art-log-glow { --glow:#39ffb099; --flame:#69ffd0; }
.atelier-art-log-ice { --glow:#75d9ff99; --flame:#c5f4ff; }
.atelier-art-earth { --glow:#c56c3266; --flame:#8e5b3c; }
.atelier-art-ground-moss { --glow:#51e69a77; --flame:#75d39d; }
.atelier-art-ground-moon { --glow:#609dff88; --flame:#a9cfff; }
.atelier-art-ground-volcano { --glow:#ff5d2588; --flame:#ff8b42; }
.atelier-art-ring-none { --glow:#e4a45e55; --flame:#ffd49a; }
.atelier-art-ring-runes { --glow:#ffb33f88; --flame:#ffd05f; }
.atelier-art-ring-aurora { --glow:#55f4cb88; --flame:#ff6ad5; }
.atelier-art-ring-celestial { --glow:#747cff88; --flame:#b4b8ff; }
.atelier-art i { position: absolute; bottom: 13px; width: 37px; height: 58px; border-radius: 70% 20% 55% 55%; transform: rotate(16deg); background: linear-gradient(10deg,#ffecbf,var(--flame) 40%,transparent 95%); box-shadow: 0 0 30px var(--glow); }
.atelier-art-wood i,.atelier-art-log-rainbow i,.atelier-art-log-glow i,.atelier-art-log-ice i { width:76px; height:27px; bottom:24px; border-radius:22px 9px 18px 8px; transform:rotate(-12deg); background:linear-gradient(90deg,#41200e,var(--flame),#27110b); }
.atelier-art-log-rainbow i { background:linear-gradient(90deg,#fb617c,#ffd75e,#6cf0a1,#66bcff,#b875ff); }
.atelier-art-log-glow i { background:linear-gradient(90deg,#092b24,#48ffc2,#123d32); box-shadow:0 0 28px #34ffb5; }
.atelier-art-log-ice i { background:linear-gradient(105deg,#5ca9c8,#e5fbff 47%,#62bce8); box-shadow:0 0 28px #78dfff; }
.atelier-art b { font-size: 70px; color: var(--flame); opacity: .13; position: absolute; top: -10px; right: 10px; }
.atelier-selection { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 16px 0 10px; }
.atelier-selection h3 { font-size: 18px; margin: 0 0 4px; }
.atelier-selection p { font-size: 14px; color: #dbd0df; margin: 0; }
.atelier-price { white-space: nowrap; color: #ffe1a9; font-size: 14px; padding-top: 3px; }
.atelier-cart { padding: 14px; margin: 16px 0; border: 1px solid #ffdb9b40; border-radius: 16px; background: #ffdb9b08; }
.atelier-cart[hidden] { display: none; }
.atelier-cart h3 { font-size: 16px; margin: 0 0 10px; }
.atelier-cart ul { list-style: none; padding: 0; margin: 0; }
.atelier-cart li, .atelier-cart p { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.atelier-cart li { margin: 8px 0; color: #e5dce8; }
.atelier-cart li span { min-width: 0; overflow-wrap: anywhere; }
.atelier-cart strong { white-space: nowrap; }
.atelier-cart p { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #ffdb9b30; color: #ffe1a9; font-size: 18px; }
.atelier-adult { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 14px; margin-bottom: 10px; }
.atelier-adult[hidden] { display: none; }
.atelier-adult input { width: 24px; height: 24px; accent-color: #ffc57a; flex-shrink: 0; }
.fire-atelier .atelier-buy { width: 100%; color: #211320; background: #ffd29a; border-color: #ffd29a; font-size: 16px; min-height: 52px; }
.atelier-status { font-size: 14px; min-height: 20px; color: #e3d6ef; margin: 10px 0; }
.atelier-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.atelier-tools button { padding: 8px; }
.atelier-note { font-size: 12px; color: #c9bed4; margin: 12px 0 0; }
.atelier-entry { width: 100%; min-height: 66px; border: 1px solid #dfb9ff70; background: radial-gradient(circle at 12% 50%,#ffbe6f35,transparent 30%),linear-gradient(105deg,#735d9755,#df976340); border-radius: 18px; padding: 13px 16px; color: #fff0d5; font: 800 16px Nunito,sans-serif; margin: 0 0 18px; cursor: pointer; box-shadow:0 10px 30px #05030b55; }
@media(min-width:900px) { body.atelier-open .hearth-identity { left: calc((100% - 480px)/2); top:18dvh; } body.atelier-open .hearth-fire-name { font-size:24px; } }
@media(min-width:900px) { .fire-atelier { justify-content: flex-end; align-items: center; padding: 24px; background: linear-gradient(90deg,transparent 25%,#090a16bb); } .atelier-sheet { width: 460px; max-height: calc(100dvh - 48px); border-radius: 28px; } body.atelier-open #fireWebglCanvas { bottom: 20px; left: calc((100% - 480px)/2); transform: translateX(-50%); } }
@media(max-width:620px) { .atelier-collection button { flex-basis:118px; } .atelier-art { height:86px; } }
@media(max-width:360px) { .atelier-sheet { padding: 16px 12px max(16px,env(safe-area-inset-bottom)); } .atelier-art { height: 78px; } .atelier-price { white-space: normal; text-align: right; } .atelier-shelf > header span { display:none; } }
@media(prefers-reduced-motion:reduce) { .atelier-collection button,.hearth-quick-actions button { transition:none; } }

/* Permanent purchases in the backpack, independent of consumable fuel. */
.artifact-bag { width:100%; min-width:0; box-sizing:border-box; color:#fff0d8; padding:0 0 16px; border-bottom:1px solid #ffffff18; }
.artifact-bag h3 { margin:0 0 6px; font-size:18px; }
.artifact-bag p { margin:0 0 12px; font-size:14px; line-height:1.45; color:#d8cce3; }
.artifact-bag-cards { display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:4px 3px 12px; }
.artifact-bag-cards:empty { display:none; }
.artifact-bag-cards button { flex:0 0 148px; display:flex; flex-direction:column; gap:8px; padding:8px; border:1px solid #ffffff29; border-radius:18px; background:#21182d; color:#fff0d8; text-align:left; font:inherit; scroll-snap-align:start; cursor:pointer; }
.artifact-bag-cards button[aria-pressed="true"] { border-color:#a1eaca; background:#17332f; }
.artifact-bag-cards img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.artifact-bag-cards strong { font-size:15px; line-height:1.3; }
.artifact-bag-cards span { margin-top:auto; font-size:14px; line-height:1.35; color:#e6d4f4; }
.artifact-bag-cards [aria-pressed="true"] span { color:#b7f5da; }
.artifact-bag-tools { display:flex; flex-wrap:wrap; gap:8px; }
.artifact-bag-tools button { min-height:48px; padding:8px 12px; border-radius:14px; border:1px solid #ffffff35; background:#33243f; color:#fff0d8; font:700 14px/1.3 Nunito,sans-serif; cursor:pointer; }
.artifact-bag button:focus-visible { outline:3px solid #ffe1a9; outline-offset:2px; }
.artifact-bag button:disabled { opacity:.6; cursor:wait; }
.artifact-bag-status:empty { display:none; }