/* /forge — the crafting toy page. The game's own styles live in css/games/forge.css (imported here so the page
   paints styled from the first frame; the game also asks for it with api.css). */
@import url('../games/forge.css');
.forge-page { padding-bottom: 72px; }
.forge-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(12px, 3vw, 40px); padding-bottom: 8px; }
.forge-head .kicker a { color: inherit; text-decoration: none; }
.forge-head .kicker a:hover { text-decoration: underline; }
.forge-head h1 { margin-bottom: .15em; }
.forge-head .lede { margin-bottom: .9em; }
.forge-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.forge-facts li { padding: .4em .85em; border-radius: 99px; background: var(--panel); border: 2px solid var(--line); font: 600 .9rem/1.1 var(--font-display); color: var(--fg); }
.forge-facts b { color: var(--accent); margin-right: .15em; }

/* Cinder, poke-able */
.forge-cinder { position: relative; width: clamp(128px, 25vw, 290px); padding: 0; margin: 0 0 -6px; border: 0; background: none; cursor: pointer; border-radius: 40px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.forge-cinder:focus-visible { outline: 3px solid var(--molten); outline-offset: 4px; }
.forge-cinder .ci { position: relative; width: 100%; height: auto; overflow: visible; will-change: transform; }
.forge-cinder-heat { position: absolute; left: -8%; right: -8%; top: 16%; bottom: -6%; border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 194, 61, .5), rgba(255, 107, 26, .16) 60%, rgba(255, 107, 26, 0)); opacity: .8; animation: ci-heat 3.2s ease-in-out infinite alternate; }
.ci-name { font: 700 12px/1 var(--font-display); letter-spacing: .2em; }
.ci-bod { transform-box: fill-box; transform-origin: 50% 100%; }
.ci-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: ci-fire .9s ease-in-out infinite alternate; }
.ci-puff { transform-box: fill-box; transform-origin: center; animation: ci-puff 3.6s ease-out infinite; opacity: 0; }
.ci-p2 { animation-delay: -1.2s; } .ci-p3 { animation-delay: -2.4s; }
.ci-eyes { transform-box: fill-box; transform-origin: 50% 55%; animation: ci-blink 6s infinite; }
.ci-pupils { transition: transform .15s ease-out; }
.ci-brow { transform-box: fill-box; transform-origin: center; transition: transform .25s var(--spring); }
.ci-joy { opacity: 0; }
.ci-grate { transform-box: fill-box; transform-origin: 50% 0; }
.forge-cinder.is-poked .ci-bod { animation: ci-wobble .65s var(--spring); }
.forge-cinder.is-chomp .ci-grate { animation: ci-chomp .42s var(--spring); }
.forge-cinder.is-chomp .ci-bod { animation: ci-squash .42s var(--spring); }
.forge-cinder.is-chomp .forge-cinder-heat, .forge-cinder.is-happy .forge-cinder-heat { animation: none; opacity: 1; transform: scale(1.06); transition: transform .3s var(--spring); }
.forge-cinder.is-happy .ci-eyes { opacity: 0; }
.forge-cinder.is-happy .ci-joy { opacity: 1; }
.forge-cinder.is-happy .ci-bod { animation: ci-hop .6s var(--spring); }
.forge-cinder.is-happy .ci-fire { animation: ci-roar .3s ease-in-out 3 alternate; }
.forge-cinder.is-meh .ci-brow-l { transform: rotate(10deg) translateY(4px); }
.forge-cinder.is-meh .ci-brow-r { transform: rotate(-10deg) translateY(4px); }
.forge-cinder-say {
  position: absolute; z-index: 2; right: 58%; top: 2%; max-width: 200px; padding: .5em .8em; border-radius: 16px 16px 4px 16px;
  background: var(--cream); color: var(--outline); border: 3px solid var(--outline); box-shadow: 0 4px 0 rgba(0, 0, 0, .3);
  font: 600 .95rem/1.15 var(--font-display); text-align: left; white-space: normal; width: max-content;
  opacity: 0; transform: scale(.5); transform-origin: 100% 100%; pointer-events: none; transition: opacity .2s, transform .3s var(--spring);
}
.forge-cinder-say.is-in { opacity: 1; transform: scale(1); }

/* the game */
.forge-main { position: relative; }
.forge-host {
  position: relative; height: clamp(540px, calc(100vh - 150px), 740px); height: clamp(540px, calc(100dvh - 150px), 740px);
  border: 4px solid var(--outline); border-radius: var(--r-lg); background: #151B2E; overflow: hidden;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .35), 0 0 60px rgba(255, 107, 26, .12);
}
.forge-host > .game-root { height: 100%; }
.forge-nojs { margin: 0; padding: 40px 24px; color: var(--cream); text-align: center; }
.forge-help { margin: 14px 4px 0; color: var(--fg-muted); max-width: 70ch; }

@media (max-width: 640px) {
  .forge-head { align-items: center; }
  .forge-head h1 { font-size: var(--step-3); }
  .forge-facts li { font-size: .8rem; padding: .35em .7em; }
  .forge-cinder-say { right: 30%; top: -10%; font-size: .82rem; max-width: 150px; }
  .forge-host { height: clamp(560px, calc(100dvh - 90px), 760px); border-width: 3px; border-radius: var(--r); }
}

@keyframes ci-heat { from { transform: scale(.94); opacity: .65; } to { transform: scale(1.04); opacity: .9; } }
@keyframes ci-fire { from { transform: scale(.94, .86); } to { transform: scale(1, 1); } }
@keyframes ci-roar { from { transform: scale(1); } to { transform: scale(1.06, 1.25); } }
@keyframes ci-puff { 0% { transform: translate(0, 20px) scale(.4); opacity: 0; } 25% { opacity: .9; } 100% { transform: translate(14px, -26px) scale(1.4); opacity: 0; } }
@keyframes ci-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
@keyframes ci-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg) scale(1.03); } 45% { transform: rotate(3.5deg); } 70% { transform: rotate(-1.5deg); } }
@keyframes ci-chomp { 0% { transform: scaleY(1); } 35% { transform: scaleY(.55); } 100% { transform: scaleY(1); } }
@keyframes ci-squash { 0% { transform: scale(1); } 35% { transform: scale(1.05, .95); } 100% { transform: scale(1); } }
@keyframes ci-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px) scale(.98, 1.03); } }