/* THE FORGE — floor 1 (floors-top agent). Cinder, the bellows, the coal scuttle, the crafting toy. */

.floor-forge {
  --wsky: #4E3474; --wsky-2: #B4507A; --wtown: #271E4A; --wmoon: 0; --wstar: .6;
  --stoke: 0;
  background: #1A1E31;
}
.floor-forge.sky-night { --wsky: #111836; --wsky-2: #22305F; --wtown: #0C1128; --wmoon: 1; --wstar: 1; }
.floor-forge.sky-dawn { --wsky: #56529A; --wsky-2: #F0A8B8; --wtown: #3D3774; --wmoon: 0; --wstar: .2; }
.floor-forge.sky-day { --wsky: #57A3E8; --wsky-2: #BDE3F7; --wtown: #6283B8; --wmoon: 0; --wstar: 0; }

.forge-scene { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.forge-scene button { pointer-events: auto; appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.forge-scene svg { overflow: visible; }

/* the back wall */
.forge-wall {
  position: absolute; inset: -15% 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 255, 255, .03), transparent 70%),
    linear-gradient(180deg, rgba(8, 10, 22, .55), transparent 30%, transparent 75%, rgba(8, 10, 22, .5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='36'%3E%3Crect width='80' height='36' fill='%23181C2E'/%3E%3Crect x='2' y='2' width='36' height='15' rx='3' fill='%23282D46'/%3E%3Crect x='42' y='2' width='36' height='15' rx='3' fill='%23242942'/%3E%3Crect x='-20' y='20' width='38' height='15' rx='3' fill='%232B3150'/%3E%3Crect x='22' y='20' width='36' height='15' rx='3' fill='%23262B44'/%3E%3Crect x='62' y='20' width='38' height='15' rx='3' fill='%232B3150'/%3E%3C/svg%3E") 0 0 / 80px 36px;
}
.fw-window { position: absolute; top: 24%; width: clamp(78px, 7.6vw, 118px); height: auto; aspect-ratio: 120 / 180; }
.fw-window.w1 { left: 49%; }
.fw-window.w2 { left: 85%; }
.fw-sky { fill: var(--wsky); }
.fw-town { fill: var(--wtown); }
.fw-moon { fill: #FFF1C9; opacity: var(--wmoon); }
.w1 .fw-moon { display: none; }
.fw-stars circle { fill: #FFF3DF; opacity: var(--wstar); }
.fw-rack { position: absolute; left: 64%; top: 30%; width: clamp(110px, 11vw, 170px); height: auto; }
.fw-sign {
  position: absolute; right: max(74px, 6%); top: 50%; transform: rotate(3deg);
  font: 700 clamp(.62rem, .5rem + .35vw, .82rem)/1.25 var(--font-display); letter-spacing: .08em; text-align: center; color: #1A1208;
  background: var(--molten); border: 3px solid var(--outline); border-radius: 8px; padding: .5em .8em; box-shadow: 0 4px 0 rgba(0, 0, 0, .4);
}
.fw-sign s { color: #B7440B; text-decoration-thickness: 2px; }
.fs-sign { display: none; }

.forge-ceiling { position: absolute; top: 0; left: 0; width: 100%; height: 60px; z-index: 3; }
.forge-floorband {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  background:
    repeating-linear-gradient(90deg, transparent 0 116px, rgba(0, 0, 0, .35) 116px 120px),
    linear-gradient(180deg, #353B5A 0 6px, #22273E 6px 60%, #1B1F33);
  border-top: 4px solid var(--outline);
}

/* the machines: positions are % of an 820×640 drawing */
.forge-frame { position: absolute; inset: 0; margin-inline: auto; width: min(100% - 2 * var(--gutter), 1320px); }
.forge-stage { position: absolute; right: 0; bottom: 46px; width: min(54vw, 860px); aspect-ratio: 820 / 640; }

.forge-glow, .forge-glow::after {
  position: absolute; left: 4%; right: -12%; top: -6%; bottom: -8%;
  background: radial-gradient(ellipse 50% 50% at 51% 70%, rgba(255, 130, 50, .38), rgba(255, 100, 30, .14) 55%, transparent 76%);
}
.forge-glow { animation: fg-pulse 3.6s ease-in-out infinite; }
.forge-glow::after { content: ''; inset: -10% -20%; opacity: var(--stoke); background: radial-gradient(ellipse 50% 50% at 50% 62%, rgba(255, 190, 90, .5), rgba(255, 110, 30, .2) 55%, transparent 76%); transition: opacity .4s; }
.is-roaring .forge-glow::after { opacity: 1; transition-duration: .1s; }
@keyframes fg-pulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.forge-floorglow { position: absolute; left: 20%; width: 62%; bottom: -60px; height: 110px; background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(255, 150, 60, .45), transparent 72%); }

.forge-heat { position: absolute; left: 38%; top: -6%; width: 25%; height: 30%; }

/* Cinder */
.cinder { position: absolute; left: 23.17%; top: 8.6%; width: 54.88%; height: 91.4%; }
.cin-art { width: 100%; height: 100%; display: block; transform-origin: 50% 100%; transition: transform .35s var(--spring); }
.cinder:hover .cin-art { transform: scale(1.015, .99); }
.cinder:focus-visible { outline-offset: -20px; border-radius: 40% 40% 12px 12px; }
.cinder.is-poked .cin-art { animation: cin-squish .6s var(--spring); }
@keyframes cin-squish { 0% { transform: none; } 25% { transform: scale(1.07, .92); } 55% { transform: scale(.97, 1.04); } 100% { transform: none; } }

.cin-bodyheat { animation: cin-heat 3.6s ease-in-out infinite; }
@keyframes cin-heat { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.cin-eyeglow { fill: var(--molten); opacity: .2; }
.cin-cheek { opacity: .42; }
.is-warm .cin-cheek, .cinder.is-happy .cin-cheek { opacity: .8; }

.cin-pupil { transition: opacity .15s; }
.cin-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .07s ease-in; }
.cinder.is-blink .cin-lid { transform: scaleY(1); }
.cin-happy { opacity: 0; transition: opacity .12s; }
.cinder.is-happy .cin-happy { opacity: 1; }
.cinder.is-happy .cin-pupil { opacity: 0; }
.cinder.is-happy .cin-lid { transform: scaleY(0); }
.cin-brow { transform-box: view-box; transition: transform .35s var(--spring); }
.cin-brow-l { transform-origin: 137px 164px; }
.cin-brow-r { transform-origin: 263px 164px; }
.cinder.is-surprised .cin-brow-l, .cinder.is-surprised .cin-brow-r { transform: translateY(-16px); }
.cinder.is-happy .cin-brow-l { transform: translateY(-6px) rotate(-5deg); }
.cinder.is-happy .cin-brow-r { transform: translateY(-6px) rotate(5deg); }
.cinder.is-open .cin-brow-l, .cinder.is-open .cin-brow-r { transform: translateY(-9px); }

.cin-jaw { transform-box: view-box; transition: transform .16s var(--ease-out); }
.cinder.is-open .cin-jaw, .cinder.is-roar .cin-jaw { transform: translateY(44px); transition: transform .22s var(--spring); }
.cinder.is-chomp .cin-jaw { animation: cin-chomp .26s ease-in-out 3; }
@keyframes cin-chomp { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(34px); } }

.cin-fire { transform-box: view-box; transform-origin: 200px 400px; transition: transform .3s var(--spring); }
.fl { transform-box: fill-box; transform-origin: 50% 100%; animation: cin-flick 1.1s ease-in-out infinite alternate; }
.fl-2 { animation-duration: .9s; animation-delay: -.3s; }
.fl-3 { animation-duration: .75s; animation-delay: -.5s; }
.fl-4 { animation-duration: .6s; }
@keyframes cin-flick { 0% { transform: scale(1, .9) skewX(-4deg); } 100% { transform: scale(1.04, 1.1) skewX(4deg); } }
.cinder.is-open .cin-fire { transform: scale(1.08, 1.15); }
.cinder.is-flare .cin-fire { transform: scale(1.12, 1.3); transition-duration: .08s; }
.floor-forge.is-stoking .cin-fire { transform: scale(calc(1 + var(--stoke) * .12), calc(1 + var(--stoke) * .35)); transition: none; }
.cinder.is-roar .cin-fire { transform: scale(1.2, 1.5); }
.cinder.is-roar .fl { animation-duration: .22s; }
.cinder.is-roar .cin-art { animation: cin-rumble .14s linear infinite; }
@keyframes cin-rumble { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 75% { transform: translate(2px, -1px); } }

.cin-burp { transform-box: view-box; transform-origin: 200px 350px; transform: scale(0); opacity: 0; pointer-events: none; }
.cinder.is-burp .cin-burp { animation: cin-burp .85s var(--ease-out); }
@keyframes cin-burp { 0% { transform: scale(.2); opacity: 1; } 35% { transform: translateY(-30px) scale(1.12); opacity: 1; } 100% { transform: translateY(-120px) scale(.7); opacity: 0; } }

.cin-embers { position: absolute; left: 50%; top: 56%; width: 0; height: 0; pointer-events: none; }
.cin-embers i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #FFD27A; box-shadow: 0 0 8px 2px rgba(255, 150, 50, .8); opacity: 0; animation: cin-ember 3.2s ease-out infinite; }
.cin-embers i:nth-child(1) { --x: -40px; animation-delay: 0s; }
.cin-embers i:nth-child(2) { --x: 30px; animation-delay: -.7s; }
.cin-embers i:nth-child(3) { --x: -12px; animation-delay: -1.5s; }
.cin-embers i:nth-child(4) { --x: 52px; animation-delay: -2.1s; }
.cin-embers i:nth-child(5) { --x: -60px; animation-delay: -2.7s; }
@keyframes cin-ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -120px) scale(.3); } }

/* the bellows */
.forge-bellows { position: absolute; left: 66%; top: 67%; width: 35%; height: 33%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.forge-bellows svg { width: 100%; height: 100%; display: block; transform: scaleX(-1); transition: transform .3s var(--spring); }
.forge-bellows:hover svg { transform: scaleX(-1) translateY(-3px); }
.forge-bellows.is-holding svg { transform: scaleX(-1) translateY(2px) scale(1.01, .99); }
.bel-top { transform-box: view-box; transform-origin: 240px 146px; transform: skewY(12deg); }
.bel-needle { transform-box: view-box; transform-origin: 137px 196px; transform: rotate(-120deg); transition: transform .7s var(--spring); }
.bel-needle-idle { transform-box: view-box; transform-origin: 137px 196px; animation: bel-idle 2.2s ease-in-out infinite alternate; }
@keyframes bel-idle { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.forge-bellows.is-pumping .bel-top, .forge-bellows.is-pumping .bel-needle { transition: none; }
.forge-bellows.is-pumping .bel-needle-idle { animation: none; }

/* the coal scuttle */
.forge-scuttle { position: absolute; left: 3%; top: 76.4%; width: 20.7%; height: 23.6%; }
.forge-scuttle > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.forge-coal { position: absolute !important; width: 31%; aspect-ratio: 48 / 42; display: grid; place-items: center; touch-action: none; }
.forge-coal svg { width: 88%; height: 88%; transition: transform .3s var(--spring); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.forge-coal:hover svg { transform: translateY(-5px) rotate(-8deg) scale(1.08); }
.forge-coal.c1 { left: 13%; top: 4%; }
.forge-coal.c2 { left: 35%; top: -4%; }
.forge-coal.c2 svg { transform: rotate(24deg); }
.forge-coal.c3 { left: 57%; top: 5%; }
.forge-coal.c3 svg { transform: scaleX(-1) rotate(-10deg); }
.forge-coal.is-lifted, .forge-coal.is-eaten { visibility: hidden; }
.forge-coal.is-back svg { animation: fc-back .5s var(--spring); }
@keyframes fc-back { 0% { transform: translateY(-30px) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.top-ghost.fc-ghost svg { width: 88%; height: 88%; margin: 6%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .45)); }

/* foreground */
.forge-front { position: absolute; inset: 0; z-index: 4; }
.ff-pipe { position: absolute; right: 1.2%; top: -20%; height: 140%; width: 46px; }
.ff-chain { position: absolute; left: 46%; top: -18%; width: 26px; height: auto; }

/* the whole page warms up (body.is-warm) */
.forge-warmth {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(ellipse 80% 70% at 50% 55%, rgba(255, 150, 60, .08), rgba(255, 110, 30, .14) 70%, rgba(255, 80, 20, .26));
}
body.is-warm .forge-warmth { opacity: 1; transition-duration: .5s; }

/* ── the words and the crafting toy ────────────────────────────────────── */
.forge-inner {
  position: relative; z-index: 2; pointer-events: none;
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding-block: 84px 100px;
  padding-left: max(0px, calc(78px - max(var(--gutter), (100vw - var(--maxw)) / 2)));
}
.forge-copy { pointer-events: auto; width: min(520px, 38vw); }
.forge-copy h2 { font-size: var(--step-4); margin-bottom: .2em; text-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.forge-lede { font-size: var(--step-1); font-weight: 700; color: #F6E7DA; margin-bottom: 1em; max-width: 30ch; }
.forge-toy {
  position: relative; min-height: 340px; border-radius: var(--r-lg); border: 4px solid var(--outline);
  background: linear-gradient(180deg, #2A2238, #1E1A2C); box-shadow: 0 8px 0 rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(255, 194, 61, .12), 0 0 40px rgba(255, 107, 26, .18);
  overflow: hidden;
}
.forge-toy > .game-root { min-height: min(520px, 64vh); }
.forge-toy-wait { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; min-height: 340px; padding: 28px; }
.forge-toy-wait p { margin: 0; color: var(--fg-muted); max-width: 34ch; }
.forge-toy-wait strong { color: var(--cream); font-family: var(--font-display); font-weight: 600; font-size: 1.15em; }
.forge-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.forge-chips span { font: 600 .9rem/1 var(--font-display); padding: .5em .8em; border-radius: 99px; background: var(--soot-2); border: 2.5px solid var(--outline); box-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.forge-more { margin: 1rem 0 0; }
.forge-more a { font: 600 var(--step-0)/1 var(--font-display); color: var(--molten); text-decoration: none; display: inline-flex; gap: .4em; align-items: center; }
.forge-more a svg { width: 1.1em; height: 1.1em; transition: transform .3s var(--spring); }
.forge-more a:hover svg { transform: translateX(5px); }

/* ── stacked (tablets and phones) ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .forge-inner { align-items: flex-start; padding-top: 72px; padding-bottom: calc(min(96vw, 700px) * .78 + 70px); }
  .forge-copy { width: min(620px, 100%); }
  .forge-stage { width: min(96vw, 700px); right: 50%; transform: translateX(50%); }
  .ff-chain, .fw-rack, .ff-pipe, .fw-window.w1, .forge-wall .fw-sign { display: none; }
  .fw-window.w2 { top: auto; bottom: 33%; left: auto; right: 7%; }
  .fs-sign { display: block; left: 1%; right: auto; top: 50%; font-size: clamp(.6rem, .45rem + .6vw, .8rem); }
}
@media (max-width: 760px) {
  .forge-inner { padding-left: 0; padding-top: 56px; }
  .ff-pipe { display: none; }
  .fw-window.w2, .fw-sign { display: none; }
  .forge-stage { width: 96vw; bottom: 40px; }
  .forge-inner { padding-bottom: calc(96vw * .78 + 64px); }
}

/* ── off screen: rest ──────────────────────────────────────────────────── */
.floor-forge.is-offscreen *, .floor-forge.is-offscreen *::before, .floor-forge.is-offscreen *::after { animation-play-state: paused !important; }
html.calm .cin-embers { display: none; }