@font-face {
  font-family: Galmuri;
  src: url("/fonts/Galmuri11.woff2?v=full-2.40.3") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Galmuri;
  src: url("/fonts/Galmuri11-Bold.woff2?v=full-2.40.3") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Gaegu;
  src: url("/fonts/Gaegu-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper: #dfcea8;
  --paper2: #eee2c3;
  --ink: #211c16;
  --soft: #5b5142;
  --night: #121018;
  --ember: #ff6d27;
  --yellow: #ffdf57;
  --violet: #9b68f2;
  --blood: #df3c52;
  --px: Galmuri, "Apple SD Gothic Neo", monospace;
  --hand: Gaegu, "Apple SD Gothic Neo", sans-serif;
  --sys:
    -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sys);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
}
.skip {
  position: fixed;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: #fff;
  padding: 10px;
}
.skip:focus {
  left: 8px;
}
.nav {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  right: 0;
  height: 68px;
  padding: 0 4vw;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: 0.2s;
}
.nav.solid {
  background: rgba(223, 206, 168, 0.93);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--ink);
}
.nav__logo {
  font: 700 13px var(--px);
}
.nav__logo span {
  color: var(--ember);
}
.nav nav {
  display: flex;
  gap: 30px;
  font: 10px var(--px);
}
.section {
  padding: clamp(90px, 12vw, 170px) max(5vw, calc((100vw - 1240px) / 2));
  position: relative;
}
.label {
  font: 9px/1.6 var(--px);
  letter-spacing: 0.1em;
}
.section-head {
  margin-bottom: 60px;
}
.section-head h2 {
  font: 700 clamp(40px, 7vw, 88px)/0.95 var(--px);
  letter-spacing: -0.04em;
  margin: 20px 0;
}
.section-head h2 em {
  font-style: normal;
  color: var(--ember);
}
.section-head > p:last-child {
  color: var(--soft);
}
.section-head--light {
  color: var(--paper2);
}
.section-head--light > p:last-child {
  color: #c5b79f;
}
.button {
  display: inline-flex;
  align-items: center;
  border: 2px solid currentColor;
  padding: 14px 17px;
  background: var(--paper2);
  font: 9px var(--px);
  box-shadow: 5px 5px var(--ink);
  cursor: pointer;
}
.button--hot {
  background: var(--ember);
  color: #1d0b03;
}
.button:active {
  translate: 4px 4px;
  box-shadow: 1px 1px;
}
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: 5vw;
  padding: 120px max(5vw, calc((100vw - 1240px) / 2)) 70px;
  position: relative;
  isolation: isolate;
}
.hero__world {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("/images/forge-district-bg.png") center/cover;
  opacity: 0.15;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(transparent, #000 30% 78%, transparent);
}
.hero__copy h1 {
  font: 700 clamp(68px, 10vw, 132px)/0.78 var(--px);
  letter-spacing: -0.05em;
  margin: 28px 0;
}
.hero__copy h1 span {
  color: var(--violet);
}
.hero__copy h1 em {
  font-style: normal;
  color: var(--ember);
}
.hero__lead {
  font: 700 clamp(16px, 1.8vw, 23px)/1.65 var(--px);
}
.hero__lead strong {
  color: #bf4215;
}
.hero__actions {
  display: flex;
  gap: 13px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  translate: -50%;
  font: 8px var(--px);
}
.status {
  background: var(--paper2);
}
.library {
  background: var(--night) url("/images/cartridge-vault-bg.png") center/cover
    fixed;
  color: var(--paper2);
  isolation: isolate;
}
.library:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 9, 15, 0.72);
}
.library__shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 35px;
}
.game-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.game-tab {
  display: grid;
  grid-template-columns: 42px 1fr;
  text-align: left;
  padding: 15px 18px;
  border: 2px solid #6d6470;
  background: #17131b;
  color: #cfc4d0;
  cursor: pointer;
}
.game-tab:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
.game-tab i {
  grid-row: span 2;
  font: 10px var(--px);
  font-style: normal;
}
.game-tab b {
  font: 14px var(--px);
}
.game-tab span {
  font: 7px var(--px);
  color: #948a97;
  margin-top: 8px;
}
.game-tab.active {
  background: var(--ember);
  color: #1b0b05;
  border-color: var(--paper2);
  box-shadow: 5px 5px var(--paper2);
}
.game-tab.active span {
  color: #5a2513;
}
.game-detail {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  background: var(--paper2);
  color: var(--ink);
  border: 3px solid var(--ink);
  min-height: 480px;
}
.game-detail__art {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
}
.game-detail__art::after {
  content: attr(data-art-kind);
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 3;
  padding: 8px 10px;
  border: 2px solid currentColor;
  background: rgba(12, 9, 15, 0.86);
  color: #f2e7ce;
  font: 6px var(--px);
  letter-spacing: 0.06em;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.65);
}
.game-detail__art[data-game-theme="deck"] {
  background-color: #0b1f1d;
  background-image:
    radial-gradient(circle at 50% 18%, #e9dc9d 0 9%, transparent 9.5%),
    repeating-linear-gradient(
      45deg,
      transparent 0 22px,
      rgba(70, 214, 192, 0.1) 22px 24px
    ),
    linear-gradient(155deg, #163d38, #080d12 72%);
}
.game-detail__art[data-game-theme="deck"]::before {
  content: "札";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  height: 172px;
  display: grid;
  place-items: center;
  translate: -50% -48%;
  rotate: -3deg;
  border: 7px solid #17120f;
  outline: 3px solid #d9c787;
  background:
    linear-gradient(#d7c887, #d7c887) center 18px / 55% 3px no-repeat,
    linear-gradient(#d7c887, #d7c887) center calc(100% - 18px) / 55% 3px
      no-repeat,
    #264f47;
  color: #f3e9bb;
  font: 700 52px var(--px);
  box-shadow:
    -66px 26px 0 -8px #8f5eae,
    -70px 30px 0 -7px #16100f,
    66px 20px 0 -8px #bd6c42,
    70px 24px 0 -7px #16100f,
    0 18px 34px rgba(0, 0, 0, 0.55);
}
.game-detail__art[data-game-theme="bells"] {
  background-color: #17151c;
  background-image:
    linear-gradient(90deg, transparent 49%, #ffb23f 49% 51%, transparent 51%),
    repeating-linear-gradient(
      0deg,
      transparent 0 56px,
      rgba(255, 178, 63, 0.18) 56px 59px
    ),
    linear-gradient(90deg, #17151c 0 12%, #302a34 12% 88%, #17151c 88%);
}
.game-detail__art[data-game-theme="bells"]::before {
  content: "13\A▲ NIGHT ▼";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(66%, 260px);
  padding: 24px 12px;
  translate: -50% -50%;
  border: 8px solid #0a090d;
  outline: 3px solid #756256;
  background:
    radial-gradient(circle at 26% 76%, #ff5d52 0 8px, transparent 9px),
    radial-gradient(circle at 74% 76%, #90d866 0 8px, transparent 9px),
    #251f27;
  color: #ffb23f;
  white-space: pre;
  text-align: center;
  font: 700 34px/1.5 var(--px);
  text-shadow: 0 0 12px rgba(255, 178, 63, 0.55);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6);
}
.game-detail__art[data-game-theme="haemada"] {
  background-color: #e9ddbd;
  background-image:
    radial-gradient(circle at 18% 68%, #e45f4d 0 7px, transparent 8px),
    radial-gradient(circle at 74% 27%, #e45f4d 0 7px, transparent 8px),
    linear-gradient(32deg, transparent 43%, #e45f4d 44% 46%, transparent 47%),
    linear-gradient(-20deg, transparent 53%, #77b7ff 54% 56%, transparent 57%),
    repeating-linear-gradient(
      0deg,
      transparent 0 31px,
      rgba(28, 63, 76, 0.13) 31px 33px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 31px,
      rgba(28, 63, 76, 0.13) 31px 33px
    );
}
.game-detail__art[data-game-theme="haemada"]::before {
  content: "2026\AYEARBOOK";
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(64%, 270px);
  aspect-ratio: 4 / 3;
  display: grid;
  place-content: center;
  translate: -50% -50%;
  rotate: 2deg;
  border: 3px solid #1d3d49;
  background: rgba(247, 238, 207, 0.9);
  color: #1d3d49;
  white-space: pre;
  text-align: center;
  font: 700 28px/1.45 var(--px);
  box-shadow:
    10px 11px 0 #77b7ff,
    14px 15px 0 #1d3d49;
}
.game-detail__copy {
  padding: clamp(28px, 4vw, 55px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.game-detail__copy h3 {
  font: 700 clamp(28px, 3.5vw, 48px)/1.08 var(--px);
  letter-spacing: -0.03em;
  text-wrap: balance;
  word-break: keep-all;
  margin: 18px 0;
}
.game-detail__copy > p:nth-of-type(2) {
  line-height: 1.8;
  color: var(--soft);
}
.game-detail dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 30px;
  border-top: 2px solid var(--ink);
}
.game-detail dl div {
  padding-top: 16px;
}
.game-detail dt {
  font: 7px var(--px);
}
.game-detail dd {
  margin: 8px 0;
  font: 9px var(--px);
}
.game-detail__link {
  align-self: flex-start;
  margin-top: 18px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  background: var(--game-accent, var(--ember));
  font: 7px var(--px);
  box-shadow: 4px 4px var(--ink);
}
.game-detail__link:hover {
  translate: 3px 3px;
  box-shadow: 1px 1px var(--ink);
}
.game-detail__link:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
.playground {
  background: #171019;
  color: var(--paper2);
}
/* IDEA FURNACE(roulette) 섹션 제거됨 */
/* FURNACE WALL — 그래피티 벽 */
.graffiti-wall {
  position: relative;
  overflow: hidden;
  border: 12px solid #4a3320;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 3px #241f18,
    inset 0 0 70px rgba(0, 0, 0, 0.55),
    7px 9px 0 rgba(33, 28, 22, 0.32);
  padding: clamp(18px, 3vw, 36px);
  min-height: 720px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.22) 0 2px,
      transparent 2px 48px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.16) 0 2px,
      transparent 2px 96px
    ),
    linear-gradient(160deg, #2a2330, #171320);
}
.gw-graf {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--hand);
  font-weight: 700;
}
.gw-graf > * {
  position: absolute;
  white-space: nowrap;
}
.gw-big {
  left: 3%;
  top: 7%;
  font-size: clamp(46px, 10vw, 130px);
  line-height: 0.86;
  color: var(--ember);
  text-shadow:
    6px 6px 0 #7a1f10,
    0 0 34px rgba(255, 122, 31, 0.3);
  transform: rotate(-4deg);
  white-space: normal;
  max-width: 11ch;
}
.gw-big em {
  font-style: normal;
  color: var(--yellow);
  text-shadow: 6px 6px 0 #6b5a10;
}
.gw-scrawl {
  color: rgba(255, 255, 255, 0.09);
  font-size: clamp(28px, 6vw, 70px);
}
.gw-scrawl.a {
  right: 4%;
  top: 8%;
  transform: rotate(6deg);
}
.gw-scrawl.b {
  left: 7%;
  bottom: 5%;
  transform: rotate(-3deg);
}
.gw-scrawl.c {
  right: 9%;
  bottom: 24%;
  transform: rotate(-9deg);
  color: rgba(255, 122, 31, 0.13);
}
.gw-tag {
  font-size: clamp(20px, 3vw, 42px);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
.gw-tag.g1 {
  right: 6%;
  top: 30%;
  color: #46d6c0;
  transform: rotate(-10deg);
}
.gw-tag.g2 {
  left: 2%;
  top: 50%;
  color: #ff8bb0;
  transform: rotate(7deg);
}
.gw-tag.g3 {
  right: 15%;
  top: 66%;
  color: var(--yellow);
  transform: rotate(-4deg);
}
.gw-tag.g4 {
  left: 42%;
  top: 4%;
  color: #8fd0ff;
  transform: rotate(3deg);
  font-size: clamp(15px, 2vw, 26px);
}
.gw-tag.g5 {
  right: 40%;
  bottom: 7%;
  color: #c6f53f;
  transform: rotate(-6deg);
}
.gw-tag.g6 {
  left: 24%;
  top: 22%;
  color: #ffb03a;
  transform: rotate(9deg);
  font-size: clamp(14px, 1.8vw, 22px);
}
.gw-drip {
  width: 5px;
  top: 0;
}
.gw-drip.a {
  left: 12%;
  height: 52px;
  background: var(--ember);
  opacity: 0.45;
}
.gw-drip.b {
  left: 57%;
  height: 30px;
  background: var(--yellow);
  opacity: 0.4;
}
.gw-drip.c {
  right: 23%;
  height: 46px;
  background: #46d6c0;
  opacity: 0.35;
}
.gw-stuff {
  position: absolute;
  inset: 0;
}
.graffiti-wall .gw-stuff > * {
  position: absolute;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: box-shadow 0.15s;
}
.gw-stuff > *.dragging {
  cursor: grabbing;
  transition: none;
}
.gw-note {
  position: relative;
  margin: 0;
  background: var(--paper2);
  border: 2px solid var(--ink);
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.5);
  padding: 9px;
  color: var(--ink);
  flex: 0 0 auto;
  width: 172px;
}
.gw-note.w {
  width: 236px;
}
.gw-note::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 54px;
  height: 18px;
  background: rgba(203, 190, 150, 0.82);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.gw-note:nth-of-type(2n)::before {
  transform: translateX(-42%) rotate(6deg);
}
.gw-note:nth-of-type(3n) {
  rotate: -2deg;
}
.gw-note:nth-of-type(4n) {
  rotate: 2.5deg;
}
.gw-note:nth-of-type(5n) {
  rotate: -1deg;
}
.gw-note .media {
  display: block;
  width: 100%;
  height: 112px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.gw-note .media.tall {
  height: 188px;
}
.gw-note figcaption {
  font-family: var(--px);
  font-size: 7.5px;
  color: var(--soft);
  margin-top: 7px;
}
.gw-swatch {
  display: block;
  width: 100%;
  height: 112px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.gw-swatch.v {
  background: repeating-linear-gradient(
    45deg,
    #1b1630 0 14px,
    #a06bff 14px 28px
  );
}
.gw-swatch.b {
  background: repeating-linear-gradient(
    -45deg,
    #210d13 0 14px,
    #df3c52 14px 28px
  );
}
.gw-note--text {
  background: #fff7df;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  text-align: center;
}
.gw-note--text b {
  font-family: var(--hand);
  font-size: clamp(17px, 2.3vw, 25px);
  line-height: 1.1;
  font-weight: 700;
}
.graffiti-wall figure {
  transform-style: preserve-3d;
  transition:
    transform 0.14s,
    box-shadow 0.2s;
}
.graffiti-wall figure:hover {
  box-shadow: 7px 10px 0 rgba(0, 0, 0, 0.6);
  z-index: 6;
}
.gw-sticker {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  align-self: center;
  filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.55));
  transform: rotate(var(--r, 0deg));
  transition: transform 0.14s;
}
.gw-sticker:hover {
  transform: rotate(0) scale(1.1);
}
.gw-sticker svg {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  shape-rendering: crispedges;
  display: block;
}
.gw-stamp {
  display: grid;
  place-items: center;
  width: 92px;
  height: 76px;
  flex: 0 0 auto;
  align-self: center;
  background: #e13b52;
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.5);
  font-family: var(--px);
  font-size: 12px;
  transform: rotate(-5deg);
}
.rules {
  background: var(--ember);
  color: #1b0a04;
}
.rules ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 3px solid currentColor;
}
.rules li {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  border-bottom: 3px solid currentColor;
  padding: 25px 0;
}
.rules li span {
  font: 10px var(--px);
}
.rules li b {
  font: 700 clamp(26px, 5vw, 62px) var(--px);
}
.studio {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  padding-inline: 0 !important;
  padding-block: 0 !important;
  background: #171019;
  color: var(--paper2);
}
.ending {
  min-height: 80vh;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 100px 5vw;
  background: var(--paper2);
}
.ending h2 {
  font: 700 clamp(48px, 9vw, 120px)/0.9 var(--px);
  margin: 30px 0;
}
.ending h2 em {
  font-style: normal;
  color: var(--ember);
}
.ending > div {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.ending small {
  font: 8px var(--px);
  margin-top: 80px;
  color: var(--soft);
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 110px;
  }
  .hero__scroll {
    display: none;
  }
  .library__shell {
    grid-template-columns: 1fr;
  }
  .game-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .game-detail {
    grid-template-columns: 1fr;
  }
  .game-detail__art {
    min-height: 360px;
  }
  .gw-stuff {
    padding-top: clamp(70px, 12vw, 120px);
  }
  .studio {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .nav nav {
    display: none;
  }
  .section {
    padding-inline: 16px;
  }
  .hero {
    padding-inline: 16px;
  }
  .hero__copy h1 {
    font-size: 18vw;
  }
  .game-list {
    grid-template-columns: 1fr;
  }
  .game-tab--empty {
    display: none;
  }
  .game-detail__art {
    min-height: 230px;
  }
  .graffiti-wall {
    min-height: 0;
    padding: 20px 12px;
    border-width: 8px;
  }
  .gw-stuff {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding-top: 58px;
  }
  .gw-stuff > * {
    position: static !important;
    cursor: default;
  }
  .gw-note,
  .gw-note.w {
    width: 100%;
    max-width: 300px;
  }
  .rules li {
    grid-template-columns: 50px 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* FURNACE WALL — 작업실 칠판 */
.chalkboard {
  --board-ivory: #eee5c7;
  --board-orange: #ff8a36;
  --board-mint: #8fc9ad;
  min-height: 760px;
  padding: 32px 32px 92px;
  overflow: hidden;
  isolation: isolate;
  border: 14px solid #5d3d27;
  border-radius: 4px;
  background-color: #18362f;
  background-image:
    radial-gradient(
      circle at 14% 17%,
      rgba(238, 229, 199, 0.06) 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 72% 64%,
      rgba(238, 229, 199, 0.04) 0 1px,
      transparent 2px
    ),
    linear-gradient(
      98deg,
      rgba(255, 255, 255, 0.018),
      transparent 32%,
      rgba(0, 0, 0, 0.06) 68%,
      transparent
    );
  background-size:
    9px 9px,
    13px 13px,
    100% 100%;
  box-shadow:
    inset 0 0 0 3px #261910,
    inset 0 0 54px rgba(0, 0, 0, 0.42),
    7px 10px 0 rgba(33, 28, 22, 0.3);
}
.chalkboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(
      ellipse at 19% 30%,
      rgba(236, 226, 195, 0.055),
      transparent 22%
    ),
    radial-gradient(
      ellipse at 83% 18%,
      rgba(236, 226, 195, 0.04),
      transparent 18%
    ),
    radial-gradient(
      ellipse at 63% 78%,
      rgba(236, 226, 195, 0.035),
      transparent 24%
    );
}
.chalkboard::after {
  content: "IDEA BOARD · MOVE ANYTHING";
  position: absolute;
  left: 18px;
  bottom: 63px;
  z-index: 1;
  color: rgba(238, 229, 199, 0.36);
  font: 7px var(--px);
  letter-spacing: 0.08em;
  pointer-events: none;
}
.chalkboard .gw-graf,
.chalkboard .gw-stuff {
  position: absolute;
  inset: 0 0 76px;
  overflow: hidden;
}
.chalkboard .gw-graf {
  z-index: 1;
  pointer-events: none;
}
.chalkboard .gw-stuff {
  z-index: 2;
  padding: 0;
}
.chalkboard .gw-graf > *,
.chalkboard .gw-stuff > * {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.chalkboard [data-board-item] {
  position: absolute;
  cursor: grab;
  pointer-events: auto;
  outline: none;
  will-change: left, top, filter;
}
.chalkboard [data-board-item]:focus-visible {
  outline: 3px dashed var(--board-orange);
  outline-offset: 5px;
}
.chalkboard [data-board-item].dragging {
  cursor: grabbing;
  translate: 0 -5px;
  filter: drop-shadow(9px 12px 5px rgba(0, 0, 0, 0.48));
}
.chalkboard .gw-big {
  color: var(--board-ivory);
  text-shadow:
    2px 1px 0 rgba(238, 229, 199, 0.18),
    -1px 0 0 rgba(238, 229, 199, 0.12);
}
.chalkboard .gw-big em {
  color: var(--board-orange);
  text-shadow: 2px 1px 0 rgba(255, 138, 54, 0.18);
}
.chalkboard .gw-scrawl {
  color: rgba(238, 229, 199, 0.36);
  text-shadow: 1px 0 0 rgba(238, 229, 199, 0.12);
}
.chalkboard .gw-scrawl.c {
  color: rgba(255, 138, 54, 0.42);
}
.chalkboard .gw-tag {
  color: var(--board-ivory);
  text-shadow: 1px 1px 0 rgba(238, 229, 199, 0.15);
}
.chalkboard .gw-tag.g1 {
  color: #92d8bd;
}
.chalkboard .gw-tag.g2 {
  color: #ffb4a1;
}
.chalkboard .gw-tag.g3 {
  color: #f4df83;
}
.chalkboard .gw-tag.g4 {
  color: #a9cbe4;
}
.chalkboard .gw-tag.g5 {
  color: #c6dc88;
}
.chalkboard .gw-tag.g6 {
  color: #f0b36e;
}
.chalkboard .gw-drip {
  display: none;
}
.chalkboard .gw-note {
  border: 0;
  box-shadow: 4px 6px 0 rgba(6, 17, 14, 0.42);
}
.chalkboard .gw-note::before {
  background: rgba(212, 201, 164, 0.78);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.28);
}
.chalkboard .gw-sticker::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  translate: -50% 0;
  background: #d9c9a4;
  box-shadow:
    inset -2px -2px 0 rgba(70, 46, 29, 0.35),
    1px 2px 2px rgba(0, 0, 0, 0.45);
}
.chalkboard .gw-stamp {
  border-color: #f0e5c8;
}
.board-tray {
  position: absolute;
  z-index: 40;
  left: -3px;
  right: -3px;
  bottom: 33px;
  height: 31px;
  border: 3px solid #2a1b12;
  border-top-color: #8b6546;
  background: #553822;
  box-shadow:
    0 -5px 8px rgba(0, 0, 0, 0.24),
    inset 0 5px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.board-eraser,
.board-chalk,
.board-marker {
  position: absolute;
  bottom: 7px;
  display: block;
}
.board-eraser {
  left: 7%;
  width: 72px;
  height: 24px;
  border: 2px solid #211710;
  background: #a97851;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.32);
  transform: rotate(-2deg);
}
.board-eraser i {
  position: absolute;
  inset: 8px 3px -5px;
  background: #ded5bd;
  border: 1px solid #6d6557;
}
.board-chalk {
  width: 47px;
  height: 7px;
  border-radius: 3px;
  box-shadow: 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.board-chalk--ivory {
  left: 24%;
  background: #eee5c7;
  transform: rotate(2deg);
}
.board-chalk--orange {
  left: 31%;
  background: #ff8a36;
  transform: rotate(-4deg);
}
.board-chalk--mint {
  left: 38%;
  background: #8fc9ad;
  transform: rotate(3deg);
}
.board-marker {
  width: 92px;
  height: 12px;
  border: 2px solid #201915;
  border-radius: 5px;
  background: #d7cfba;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
}
.board-marker::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -2px;
  width: 14px;
  height: 12px;
  border: 2px solid #201915;
  border-radius: 4px 0 0 4px;
  background: currentColor;
}
.board-marker i {
  position: absolute;
  right: 11px;
  top: 2px;
  width: 27px;
  height: 4px;
  background: rgba(0, 0, 0, 0.28);
}
.board-marker--cream {
  right: 21%;
  color: #eee5c7;
  transform: rotate(-2deg);
}
.board-marker--ember {
  right: 7%;
  color: #ff7130;
  transform: rotate(3deg);
}
.board-hint {
  position: absolute;
  z-index: 41;
  right: 16px;
  bottom: 5px;
  margin: 0;
  color: #cbbf9e;
  font: 8px var(--px);
  pointer-events: none;
}
.board-hint span {
  color: var(--board-orange);
}
.board-hint kbd {
  margin-left: 7px;
  color: #172f29;
  background: #d8caa5;
  padding: 3px 5px;
  font: 7px var(--px);
}

@media (max-width: 560px) {
  .chalkboard {
    min-height: 760px;
    padding: 18px 14px 86px;
    border-width: 9px;
  }
  .chalkboard .gw-graf,
  .chalkboard .gw-stuff {
    position: absolute;
    inset: 0 0 72px;
    display: block;
    padding: 0;
  }
  .chalkboard .gw-stuff > * {
    position: absolute !important;
    cursor: grab;
  }
  .chalkboard .gw-big {
    font-size: 38px;
  }
  .chalkboard .gw-scrawl {
    font-size: 28px;
  }
  .chalkboard .gw-tag {
    font-size: 20px;
  }
  .chalkboard .gw-note,
  .chalkboard .gw-note.w {
    width: 180px;
    max-width: 68vw;
  }
  .chalkboard .gw-note .media {
    height: 92px;
  }
  .chalkboard .gw-note .media.tall {
    height: 138px;
  }
  .board-chalk--ivory {
    left: 34%;
  }
  .board-chalk--orange {
    left: 50%;
  }
  .board-chalk--mint {
    display: none;
  }
  .board-marker--cream {
    display: none;
  }
  .board-marker--ember {
    right: 5%;
    width: 76px;
  }
  .board-hint {
    left: 11px;
    right: auto;
    font-size: 7px;
  }
  .chalkboard::after {
    display: none;
  }
}

/* Pixel type: use the authored bold face; do not disable browser font smoothing. */
.nav__logo,
.nav nav,
.label,
.button,
.hero__copy h1,
.hero__lead,
.section-head h2,
.game-tab b,
.game-detail__copy h3,
.rules li b,
.ending h2 {
  font-weight: 700;
  font-synthesis: none;
}
.hero__copy {
  min-width: 0;
}
.hero__copy h1 {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  max-width: none;
  font-size: clamp(64px, 8.2vw, 108px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.hero__copy h1 span,
.hero__copy h1 em {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
}
.hero__lead {
  font-size: 20px;
  letter-spacing: -0.02em;
}

/* The page behaves as a sequence of arcade stages. */
.section {
  transition:
    background-color 0.45s ease,
    filter 0.45s ease;
}
.section.is-active .section-head .label {
  color: var(--ember);
}
.section-head h2 {
  transition:
    translate 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 0.45s ease;
}
.section.is-active .section-head h2 {
  translate: 8px 0;
  text-shadow: 3px 3px 0 rgba(255, 109, 39, 0.18);
}
/* 히어로(맨 위, 투명 nav) 위에선 검은 글씨가 안 보이므로 흰색으로. 스크롤 내려 .solid 되면 기본 검정 복귀 */
/* 색 전환이 덜컹거리지 않게 자식 요소에 color transition (부모 .nav의 transition은 자식 color에 적용 안 됨) */
.nav__logo,
.nav nav a,
.nav__logo span {
  transition: color 0.28s ease;
}
.nav:not(.solid) .nav__logo,
.nav:not(.solid) nav a {
  color: #fff;
}
.nav:not(.solid) .nav__logo span {
  color: var(--ember);
}

.game-tab:not(:disabled) {
  transition:
    translate 0.16s steps(2),
    box-shadow 0.16s steps(2),
    background-color 0.16s;
}
.game-tab:not(:disabled):hover {
  translate: 8px 0;
}
.game-tab.active {
  translate: 10px 0;
}

@media (max-width: 900px) {
  .hero__copy h1 {
    font-size: clamp(58px, 14vw, 96px);
  }
}
@media (max-width: 560px) {
  .hero__copy h1 {
    font-size: clamp(52px, 16.4vw, 72px);
    letter-spacing: -0.05em;
  }
  .hero__lead {
    font-size: 16px;
  }
  .section.is-active .section-head h2 {
    translate: 0;
  }
}

/* Hero 2.0 — a forge gate, not an arcade cabinet. */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 112px max(5vw, calc((100vw - 1280px) / 2)) 82px;
  overflow: hidden;
  background: #090807;
  color: var(--paper2);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      #090807 0%,
      rgba(9, 8, 7, 0.98) 20%,
      rgba(9, 8, 7, 0.8) 38%,
      rgba(9, 8, 7, 0.08) 66%
    ),
    linear-gradient(
      0deg,
      rgba(5, 4, 3, 0.62),
      transparent 28% 78%,
      rgba(5, 4, 3, 0.35)
    );
}
.hero__world {
  inset: 0;
  z-index: -2;
  opacity: 1;
  mix-blend-mode: normal;
  mask-image: none;
  background: url("/images/forge-gate-hero.png") 58% center/cover no-repeat;
  transform: scale(1.01);
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s;
}
.hero__copy {
  position: relative;
  z-index: 4;
  width: min(510px, 42vw);
  min-width: 360px;
}
.hero__copy .label {
  color: #d9aa7e;
}
.hero__copy h1 {
  display: flex;
  width: max-content;
  margin: 22px 0 26px;
  font-size: clamp(68px, 8.5vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-shadow:
    0 4px 0 #000,
    0 0 34px rgba(0, 0, 0, 0.8);
}
.hero__copy h1 span {
  color: var(--paper2);
}
.hero__copy h1 em {
  color: var(--ember);
}
.hero__lead {
  margin: 0;
  color: #d8cbb5;
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.75;
  text-shadow: 0 2px 10px #000;
}
.hero__lead strong {
  color: #ffb375;
}
.hero__actions {
  margin-top: 30px;
}
.hero .button {
  border-color: #8a705b;
  background: rgba(13, 11, 9, 0.82);
  color: var(--paper2);
  box-shadow: 5px 5px #000;
  backdrop-filter: blur(8px);
}
.hero .button--hot {
  border-color: #ffb06f;
  background: #f06a25;
  color: #1b0b04;
  box-shadow:
    5px 5px #6c260d,
    0 0 32px rgba(255, 109, 39, 0.2);
}
.hero__enter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  min-width: 188px;
  text-align: left;
}
.hero__enter span {
  font: 700 11px var(--px);
}
.hero__enter i {
  font: normal 7px var(--px);
  opacity: 0.72;
}
.hero__readout {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  margin-top: 28px;
  padding-top: 15px;
  border-top: 1px solid #55483d;
  color: #a99c8b;
  font: 7px var(--px);
}
.hero__readout > i {
  width: 7px;
  height: 7px;
  background: #d78b3b;
  box-shadow: 0 0 12px #ff791f;
}
.hero__readout > b {
  margin-left: 14px;
  color: #d2c5b2;
  font-weight: 400;
}
.hero__readout b span {
  color: #ff9861;
}
.forge-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.forge-gate__ring {
  position: absolute;
  left: 69.5%;
  top: 54.5%;
  width: min(28vw, 390px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 2px solid rgba(255, 158, 71, 0.42);
  box-shadow:
    inset 0 0 40px rgba(255, 102, 28, 0.18),
    0 0 36px rgba(255, 96, 18, 0.16);
  opacity: 0.45;
  transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.forge-gate__crosshair {
  position: absolute;
  left: 69.5%;
  top: 54.5%;
  width: 54px;
  height: 54px;
  translate: -50% -50%;
  opacity: 0.42;
  transition: 0.4s;
}
.forge-gate__crosshair i {
  position: absolute;
  background: #ffd3a7;
}
.forge-gate__crosshair i:nth-child(1),
.forge-gate__crosshair i:nth-child(2) {
  width: 12px;
  height: 2px;
  top: 26px;
}
.forge-gate__crosshair i:nth-child(1) {
  left: 0;
}
.forge-gate__crosshair i:nth-child(2) {
  right: 0;
}
.forge-gate__crosshair i:nth-child(3),
.forge-gate__crosshair i:nth-child(4) {
  width: 2px;
  height: 12px;
  left: 26px;
}
.forge-gate__crosshair i:nth-child(3) {
  top: 0;
}
.forge-gate__crosshair i:nth-child(4) {
  bottom: 0;
}
.forge-gate__console {
  position: absolute;
  right: 6.5vw;
  bottom: 13vh;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #c0ab94;
  font: 7px var(--px);
  opacity: 0.7;
}
.forge-gate__console b {
  position: relative;
  width: 12px;
  height: 36px;
  border: 2px solid #a66b3e;
  background: #1b1713;
  transform-origin: bottom;
  transition: 0.35s steps(4);
}
.forge-gate__console b::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 12px;
  left: -5px;
  top: -7px;
  background: #d5a16b;
  border: 2px solid #21140d;
}
.forge-gate__console small {
  font: 6px var(--px);
  color: #8d7866;
}
.hero__portal-glow {
  position: absolute;
  left: 69.5%;
  top: 54.5%;
  width: 42vw;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 132, 40, 0.15),
    rgba(255, 85, 9, 0.05) 47%,
    transparent 68%
  );
  filter: blur(8px);
  animation: gate-breathe 2.7s steps(5) infinite;
}
.hero__embers {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #ffb35e 0 1px, transparent 1.5px);
  background-size: 83px 91px;
  opacity: 0.14;
  animation: ember-rise 9s linear infinite;
}
.hero__scroll {
  left: auto;
  right: 4vw;
  bottom: 25px;
  translate: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #9a8877;
}
.hero__scroll i {
  width: 48px;
  height: 1px;
  background: #9a8877;
  position: relative;
}
.hero__scroll i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  rotate: -45deg;
}
.hero.is-entering .hero__world {
  transform: scale(1.07);
  filter: saturate(1.22) brightness(1.08);
}
.hero.is-entering .forge-gate__ring {
  opacity: 1;
  scale: 1.08;
  border-width: 5px;
  box-shadow:
    inset 0 0 90px rgba(255, 122, 35, 0.5),
    0 0 90px rgba(255, 91, 18, 0.7);
}
.hero.is-entering .forge-gate__crosshair {
  opacity: 1;
  scale: 1.5;
  rotate: 180deg;
}
.hero.is-entering .forge-gate__console b {
  rotate: 32deg;
}
.hero.is-entering .hero__readout > i {
  background: #7bff91;
  box-shadow: 0 0 16px #65e992;
}
.hero.is-open .hero__world {
  transform: scale(1.14);
  filter: saturate(1.35) brightness(1.12);
}
@keyframes gate-breathe {
  50% {
    opacity: 0.55;
    scale: 1.05;
  }
}
@keyframes ember-rise {
  to {
    background-position: 37px -182px;
  }
}

@media (max-width: 900px) {
  .hero {
    align-items: flex-end;
    min-height: 880px;
    padding-top: 100px;
    padding-bottom: 90px;
  }
  .hero::before {
    background: linear-gradient(
      0deg,
      #090807 0%,
      rgba(9, 8, 7, 0.98) 28%,
      rgba(9, 8, 7, 0.36) 62%,
      rgba(9, 8, 7, 0.15)
    );
  }
  .hero__world {
    background-position: 67% center;
  }
  .hero__copy {
    width: min(590px, 90vw);
    min-width: 0;
  }
  .hero__copy h1 {
    font-size: clamp(64px, 14vw, 104px);
  }
  .forge-gate__ring,
  .hero__portal-glow {
    left: 64%;
    top: 39%;
  }
  .forge-gate__console {
    display: none;
  }
}
@media (max-width: 560px) {
  .hero {
    min-height: 780px;
    padding: 92px 18px 68px;
  }
  .hero__world {
    background-position: 69% center;
  }
  .hero__copy {
    width: 100%;
  }
  .hero__copy h1 {
    font-size: clamp(55px, 17vw, 76px);
    margin-block: 17px 22px;
  }
  .hero__lead {
    font-size: 15px;
  }
  .hero__actions {
    gap: 10px;
    margin-top: 24px;
  }
  .hero .button {
    padding: 12px 13px;
  }
  .hero__library-link {
    display: none;
  }
  .hero__readout {
    font-size: 6px;
  }
  .hero__readout > b {
    margin-left: 2px;
  }
  .forge-gate__ring {
    left: 65%;
    top: 35%;
    width: 52vw;
  }
  .hero__portal-glow {
    left: 65%;
    top: 35%;
    width: 72vw;
  }
  .hero__scroll {
    display: none;
  }
}

/* LIVE — scalable production queue inside the main furnace. */
.status {
  background: #17130f;
  color: var(--paper2);
  overflow: hidden;
  isolation: isolate;
}
.status::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      circle at 50% 105%,
      rgba(255, 93, 22, 0.23),
      transparent 42%
    ),
    linear-gradient(
      90deg,
      transparent 49.8%,
      rgba(255, 150, 65, 0.06) 50%,
      transparent 50.2%
    );
}
.status::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.15;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, #9f7658 32px),
    repeating-linear-gradient(90deg, transparent 0 63px, #9f7658 64px);
  mask-image: linear-gradient(transparent, #000 20% 80%, transparent);
}
.live-head {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 390px);
  align-items: end;
  gap: 40px;
}
.live-head > p {
  margin: 0 0 8px;
  padding-left: 22px;
  border-left: 2px solid var(--ember);
  color: #aa9987;
  line-height: 1.8;
}
.live-head h2 {
  color: var(--paper2);
}
.forge-queue {
  position: relative;
  border: 3px solid #76604f;
  background: #0b0908;
  box-shadow:
    13px 15px #050403,
    0 0 70px rgba(255, 89, 19, 0.1);
}
.forge-queue::before,
.forge-queue::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 84px;
  bottom: 42px;
  width: 17px;
  border: 3px solid #6d5747;
  background: repeating-linear-gradient(
    0deg,
    #302720 0 17px,
    #17120f 17px 24px
  );
}
.forge-queue::before {
  left: -12px;
}
.forge-queue::after {
  right: -12px;
}
.forge-queue__crown {
  height: 45px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 0 25px;
  background: #2a211b;
  border-bottom: 2px solid #755c49;
  color: #cbb69d;
  font: 8px var(--px);
  letter-spacing: 0.08em;
}
.forge-queue__crown i {
  height: 2px;
  background: #614b3b;
  position: relative;
}
.forge-queue__crown i::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  top: -4px;
  background: #a47755;
  border-radius: 50%;
}
.forge-queue__crown i:last-child::after {
  right: 0;
}
.forge-queue__heat {
  display: grid;
  grid-template-columns: 230px 1fr auto;
  align-items: stretch;
  border-bottom: 2px solid #6e5645;
  background: #12100e;
}
.forge-queue__temp {
  padding: 22px 25px;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 10px;
  align-items: center;
}
.live-lamp {
  grid-row: 1/4;
  width: 10px;
  height: 10px;
  background: #69ee91;
  box-shadow: 0 0 14px #69ee91;
  animation: live-pulse 1.5s steps(2) infinite;
}
.forge-queue__temp small {
  font: 7px var(--px);
  color: #9c8977;
}
.forge-queue__temp strong {
  font: 700 21px var(--px);
  color: #ff9b5f;
}
.forge-queue__temp em {
  font: normal 6px var(--px);
  color: #70d88b;
}
.forge-queue__pipe {
  position: relative;
  overflow: hidden;
}
.forge-queue__pipe::before,
.forge-queue__pipe::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 10px;
  translate: 0 -50%;
  border: 3px solid #5d4839;
  background: #2a201a;
}
.forge-queue__pipe::after {
  left: 10%;
  right: 10%;
  height: 3px;
  border: 0;
  background: linear-gradient(
    90deg,
    #9e3313,
    #ff8b35,
    #ffc174,
    #ff8b35,
    #9e3313
  );
  background-size: 200% 100%;
  box-shadow: 0 0 14px #ff5b18;
  animation: molten-flow 2.2s linear infinite;
}
.forge-queue__pipe i {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  translate: -50% -50%;
  border: 5px dotted #80634f;
  border-radius: 50%;
  background: #19130f;
  animation: gear-turn 5s steps(12) infinite;
}
.forge-queue__heat dl {
  display: grid;
  grid-template-columns: repeat(3, 105px);
  margin: 0;
}
.forge-queue__heat dl div {
  padding: 17px 14px;
  border-left: 1px solid #4f3d31;
}
.forge-queue__heat dt {
  font: 6px var(--px);
  color: #8f7c6a;
}
.forge-queue__heat dd {
  margin: 8px 0 0;
  font: 700 16px var(--px);
  color: #d9c7af;
}
.forge-queue__stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-left: 340px;
  padding: 15px 125px 12px 0;
  color: #826f60;
  font: 6px var(--px);
}
.forge-queue__stages span {
  text-align: center;
}
.forge-queue__list {
  border-top: 1px solid #49382e;
}
.forge-job {
  display: grid;
  grid-template-columns: 90px 250px minmax(300px, 1fr) 115px;
  gap: 20px;
  align-items: center;
  min-height: 142px;
  padding: 22px 28px;
  border-bottom: 1px solid #503e32;
  position: relative;
  transition:
    background 0.2s,
    translate 0.2s;
}
.forge-job:hover {
  background: #1b1410;
  translate: 7px 0;
}
.forge-job::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--job);
  box-shadow: 0 0 17px var(--job);
}
.forge-job__core {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--job);
  font: 8px var(--px);
}
.forge-job__core i {
  width: 44px;
  height: 44px;
  border: 3px solid #735b49;
  background: radial-gradient(
    circle,
    var(--job) 0 18%,
    #221813 20% 40%,
    var(--job) 42% 46%,
    #0b0908 48%
  );
  box-shadow: 0 0 17px color-mix(in srgb, var(--job), transparent 55%);
  animation: core-heat 2.4s steps(4) infinite;
}
.forge-job__title small,
.forge-job__state small {
  font: 6px var(--px);
  color: #8f7c6c;
}
.forge-job__title h3 {
  font: 700 22px var(--px);
  margin: 9px 0;
}
.forge-job__title p {
  margin: 0;
  color: #9f8e7c;
  font-size: 12px;
}
.forge-job__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  position: relative;
  padding-bottom: 22px;
}
.forge-job__track::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 11px;
  height: 4px;
  background: #392d25;
}
.forge-job__track > i {
  z-index: 2;
  width: 25px;
  height: 25px;
  justify-self: center;
  border: 3px solid #594639;
  background: #17110e;
  rotate: 45deg;
}
.forge-job__track > i.done {
  border-color: color-mix(in srgb, var(--job), #594639 38%);
  background: color-mix(in srgb, var(--job), #17110e 38%);
}
.forge-job__track > i.on {
  border-color: var(--job);
  background: var(--job);
  box-shadow: 0 0 19px var(--job);
  animation: station-pulse 1.3s steps(2) infinite;
}
.forge-job__state {
  text-align: right;
}
.forge-job__state strong {
  display: block;
  margin-top: 12px;
  font: 700 22px var(--px);
  color: var(--job);
}
.forge-job--live .forge-job__state small {
  color: #8cc9ff;
}
.forge-job--locked {
  --job: #55483f;
  opacity: 0.55;
}
.forge-job--locked .forge-job__core i {
  animation: none;
  filter: grayscale(1);
}
.forge-job--locked .forge-job__track b {
  display: none;
}
.forge-queue__footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 25px;
  align-items: center;
  padding: 15px 22px;
  background: #2a211b;
  color: #8f7b69;
  font: 6px var(--px);
}
.forge-queue__footer > span {
  color: #70d88b;
}
.forge-queue__footer p {
  margin: 0;
  text-align: center;
}
.forge-queue__footer b {
  font-weight: 400;
}
@keyframes molten-flow {
  to {
    background-position: -200% 0;
  }
}
@keyframes gear-turn {
  to {
    rotate: 360deg;
  }
}
@keyframes live-pulse {
  50% {
    opacity: 0.4;
  }
}
@keyframes core-heat {
  50% {
    filter: brightness(1.4);
  }
}
@keyframes station-pulse {
  50% {
    scale: 0.86;
  }
}
@media (max-width: 950px) {
  .live-head {
    grid-template-columns: 1fr;
  }
  .forge-queue__heat {
    grid-template-columns: 210px 1fr;
  }
  .forge-queue__heat dl {
    grid-column: 1/-1;
    border-top: 1px solid #4f3d31;
  }
  .forge-queue__heat dl div {
    border-left: 0;
    border-right: 1px solid #4f3d31;
  }
  .forge-queue__stages {
    margin-left: 270px;
    padding-right: 100px;
  }
  .forge-job {
    grid-template-columns: 70px 180px 1fr 90px;
    padding-inline: 20px;
  }
  .forge-job__title p {
    display: none;
  }
}
@media (max-width: 650px) {
  .live-head > p {
    display: none;
  }
  .forge-queue::before,
  .forge-queue::after {
    display: none;
  }
  .forge-queue__crown {
    font-size: 6px;
  }
  .forge-queue__heat {
    grid-template-columns: 1fr;
  }
  .forge-queue__temp {
    border-right: 0;
  }
  .forge-queue__pipe {
    height: 54px;
    border-top: 1px solid #4f3d31;
  }
  .forge-queue__heat dl {
    grid-template-columns: repeat(3, 1fr);
  }
  .forge-queue__heat dl div {
    padding: 13px 8px;
  }
  .forge-queue__stages {
    display: none;
  }
  .forge-job {
    grid-template-columns: 52px 1fr 64px;
    gap: 12px;
    min-height: 150px;
    padding: 18px 12px;
  }
  .forge-job__core {
    gap: 5px;
  }
  .forge-job__core i {
    width: 35px;
    height: 35px;
  }
  .forge-job__title h3 {
    font-size: 17px;
  }
  .forge-job__track {
    grid-column: 2/-1;
    grid-row: 2;
  }
  .forge-job__state {
    grid-column: 3;
    grid-row: 1;
  }
  .forge-job__state strong {
    font-size: 16px;
  }
  .forge-job__track > i {
    width: 19px;
    height: 19px;
  }
  .forge-queue__footer {
    grid-template-columns: 1fr;
  }
  .forge-queue__footer p,
  .forge-queue__footer b {
    display: none;
  }
}

/* DNA — four hammer beats. */
.dna {
  background: var(--paper);
  overflow: hidden;
}
.dna-head {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 360px);
  gap: 40px;
  align-items: end;
}
.dna-head > p {
  margin: 0 0 8px;
  padding-left: 20px;
  border-left: 2px solid var(--ember);
  color: var(--soft);
  line-height: 1.8;
}
.forge-rhythm {
  position: relative;
  border: 3px solid var(--ink);
  background: #17130f;
  color: var(--paper2);
  box-shadow: 12px 14px rgba(33, 28, 22, 0.3);
  padding-top: 12px;
}
.forge-rhythm::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background: repeating-linear-gradient(0deg, transparent 0 4px, #fff 5px);
}
.forge-rhythm__rail {
  height: 17px;
  margin: 0 18px 12px;
  border: 2px solid #675143;
  background: #0a0807;
  padding: 3px;
  position: relative;
}
.forge-rhythm__rail i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0.25);
  background: linear-gradient(90deg, #a43110, var(--ember), var(--yellow));
  box-shadow: 0 0 16px var(--ember);
  transition: transform 0.45s steps(5);
}
.forge-rhythm__rail span {
  position: absolute;
  right: 5px;
  top: -20px;
  color: #9b806d;
  font: 6px var(--px);
}
.forge-beat {
  width: 100%;
  min-height: 135px;
  display: grid;
  grid-template-columns: 75px 90px 1fr 115px;
  gap: 22px;
  align-items: center;
  padding: 20px 28px;
  border: 0;
  border-top: 1px solid #514035;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition:
    background 0.18s,
    translate 0.18s;
}
.forge-beat:hover,
.forge-beat:focus-visible {
  background: #241914;
  outline: 0;
  translate: 7px 0;
}
.forge-beat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--ember);
  box-shadow: 0 0 18px var(--ember);
  transition: transform 0.18s;
}
.forge-beat.is-struck::before {
  transform: scaleX(1);
}
.forge-beat__number {
  font: 700 30px var(--px);
  color: #4c3d34;
  transition: 0.2s;
}
.forge-beat.is-struck .forge-beat__number {
  color: var(--ember);
  text-shadow: 0 0 19px rgba(255, 109, 39, 0.4);
}
.forge-beat__relic {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
  image-rendering: auto;
  filter: saturate(0.72) brightness(0.76)
    drop-shadow(4px 6px 3px rgba(0, 0, 0, 0.62));
  transform: scale(0.88);
  transition:
    filter 0.22s ease,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.forge-beat:hover .forge-beat__relic,
.forge-beat:focus-visible .forge-beat__relic {
  filter: saturate(0.95) brightness(0.92)
    drop-shadow(5px 8px 4px rgba(0, 0, 0, 0.68));
  transform: scale(0.96) translateY(-2px);
}
.forge-beat.is-struck .forge-beat__relic {
  animation: dna-relic-ignite 0.56s steps(5) both;
}
.forge-beat__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.forge-beat__copy small {
  color: #9b806e;
  font: 6px var(--px);
}
.forge-beat__copy strong {
  font: 700 clamp(23px, 3vw, 38px)/1.2 var(--px);
}
.forge-beat__copy em {
  font-style: normal;
  color: #a99886;
  font-size: 13px;
}
.forge-beat__stamp {
  justify-self: end;
  border: 2px solid #5a483b;
  padding: 12px 10px;
  color: #685447;
  font: 8px var(--px);
  rotate: -3deg;
  transition: 0.2s;
}
.forge-beat.is-struck .forge-beat__stamp {
  border-color: var(--ember);
  color: var(--ember);
  box-shadow: inset 0 0 14px rgba(255, 109, 39, 0.11);
  rotate: 2deg;
}
.forge-beat.is-struck::after {
  content: "";
  position: absolute;
  left: 148px;
  top: 72%;
  width: 6px;
  height: 6px;
  background: var(--yellow);
  box-shadow:
    14px -16px var(--ember),
    25px 2px var(--yellow),
    40px -24px var(--ember),
    54px -5px var(--yellow);
  animation: dna-sparks 0.5s steps(5) both;
}
.forge-rhythm__readout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 25px;
  padding: 16px 23px;
  border-top: 2px solid #675143;
  background: #2b211b;
  color: #8e7967;
  font: 6px var(--px);
}
.forge-rhythm__readout b {
  color: #d4bca3;
  font-weight: 400;
}
.forge-rhythm__readout i {
  font-style: normal;
}
.forge-rhythm__readout em {
  font-style: normal;
  color: var(--ember);
}
@keyframes dna-relic-ignite {
  0% {
    transform: scale(0.88);
    filter: saturate(0.72) brightness(0.76)
      drop-shadow(4px 6px 3px rgba(0, 0, 0, 0.62));
  }
  35% {
    transform: scale(1.08) translateY(-5px);
    filter: saturate(1.35) brightness(1.45)
      drop-shadow(0 0 12px rgba(255, 109, 39, 0.72));
  }
  65% {
    transform: scale(0.94) translateY(1px);
  }
  100% {
    transform: scale(1);
    filter: saturate(1.08) brightness(1.04)
      drop-shadow(5px 8px 4px rgba(0, 0, 0, 0.7));
  }
}
@keyframes dna-sparks {
  from {
    opacity: 0;
    translate: 0 15px;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    translate: 28px -30px;
  }
}
@media (max-width: 780px) {
  .dna-head {
    grid-template-columns: 1fr;
  }
  .dna-head > p {
    display: none;
  }
  .forge-beat {
    grid-template-columns: 52px 64px 1fr;
    padding-inline: 17px;
  }
  .forge-beat__stamp {
    display: none;
  }
  .forge-beat__copy em {
    font-size: 12px;
  }
  .forge-beat.is-struck::after {
    left: 105px;
  }
  .forge-rhythm__readout {
    grid-template-columns: 1fr auto;
  }
  .forge-rhythm__readout > span {
    display: none;
  }
}
@media (max-width: 520px) {
  .forge-beat {
    grid-template-columns: 42px 54px 1fr;
    gap: 8px;
    min-height: 125px;
  }
  .forge-beat__number {
    font-size: 22px;
  }
  .forge-beat__relic {
    width: 54px;
    height: 54px;
  }
  .forge-beat__copy strong {
    font-size: 19px;
  }
  .forge-beat__copy em {
    font-size: 10px;
    line-height: 1.5;
  }
  .forge-beat.is-struck::after {
    left: 96px;
  }
  .forge-rhythm__readout {
    padding-inline: 13px;
    font-size: 5px;
  }
}

/* PLAYGROUND — asset-led 3D timing forge. */
.playground {
  background: #0c0908;
  color: var(--paper2);
  overflow: hidden;
}
.playground-head {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 340px);
  gap: 40px;
  align-items: end;
}
.playground-head > p {
  margin: 0 0 8px;
  padding-left: 20px;
  border-left: 2px solid var(--ember);
  color: #a79380;
  line-height: 1.8;
}
.timing-forge {
  border: 3px solid #725744;
  background: #080605;
  box-shadow:
    15px 17px #020202,
    0 0 70px rgba(255, 85, 16, 0.1);
}
.timing-forge__top {
  height: 48px;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2a211b;
  border-bottom: 2px solid #735846;
  color: #ad9883;
  font: 7px var(--px);
}
.timing-forge__top span i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
  background: #68df8b;
  box-shadow: 0 0 13px #68df8b;
  animation: live-pulse 1.4s steps(2) infinite;
}
.timing-forge__top b {
  font-weight: 400;
}
.timing-forge__top em {
  font-style: normal;
  color: #ffd072;
}
.timing-forge__stage {
  position: relative;
  aspect-ratio: 16/8.2;
  overflow: hidden;
  background: #0c0806;
  isolation: isolate;
}
.timing-forge__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) brightness(0.88);
  transition: 0.45s;
}
.timing-forge__stage.is-perfect .timing-forge__scene {
  filter: saturate(1.22) brightness(1.12);
}
.timing-forge__sword {
  position: absolute;
  z-index: 3;
  left: 17.5%;
  top: 18.5%;
  width: 65%;
  height: auto;
  transform: perspective(900px) rotateX(62deg) rotateZ(-0.7deg);
  transform-origin: center;
  filter: drop-shadow(0 12px 4px rgba(8, 4, 2, 0.82))
    drop-shadow(0 0 5px rgba(255, 97, 22, 0.45));
  transition:
    opacity 0.16s,
    filter 0.35s,
    transform 0.35s;
  pointer-events: none;
}
.timing-forge__stage.is-changing .timing-forge__sword {
  animation: sword-forged 0.6s steps(6);
}
.timing-forge__stage.is-perfect .timing-forge__sword {
  filter: drop-shadow(0 12px 4px rgba(8, 4, 2, 0.76))
    drop-shadow(0 0 10px #ffb75f) drop-shadow(0 0 15px rgba(157, 105, 244, 0.3));
}
.timing-forge__hammer {
  position: absolute;
  z-index: 4;
  left: 38%;
  top: -36%;
  width: 24%;
  height: auto;
  filter: drop-shadow(9px 18px 12px rgba(0, 0, 0, 0.8));
  will-change: transform;
}
.timing-forge__stage.is-hit .timing-forge__hammer {
  animation: asset-hammer-hit 0.68s both;
}
.timing-forge__stage.is-hit .timing-forge__scene {
  animation: scene-impact 0.42s steps(4);
}
.timing-forge__flash {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 58%;
  width: 12%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff6c7;
  filter: blur(18px);
  opacity: 0;
  mix-blend-mode: screen;
}
.timing-forge__stage.is-hit .timing-forge__flash {
  animation: impact-flash 0.48s steps(4);
}
.timing-forge__sparks {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 57%;
  width: 7px;
  height: 7px;
  opacity: 0;
}
.timing-forge__stage.is-hit .timing-forge__sparks {
  opacity: 1;
  box-shadow:
    52px -92px #ffd35f,
    98px -42px #ff6b27,
    124px 18px #ffd35f,
    -54px -76px #ff6b27,
    -110px -29px #ffd35f,
    -136px 34px #ff6b27,
    35px 82px #ffd35f,
    -28px 105px #ff6b27;
  animation: asset-sparks 0.6s steps(6);
}
.timing-forge__grade {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 26%;
  translate: -50% -50%;
  font: 700 clamp(28px, 5vw, 68px) var(--px);
  color: #fff0c8;
  text-shadow:
    4px 4px #6c1d07,
    0 0 35px #ff6b27;
  opacity: 0;
}
.timing-forge__stage.is-hit .timing-forge__grade {
  animation: grade-pop 0.85s steps(5);
}
.timing-forge__hud {
  position: absolute;
  z-index: 3;
  inset: auto 18px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #c8ad91;
  font: 6px var(--px);
  text-shadow: 0 2px 4px #000;
}
.timing-forge__hud b {
  font: 700 13px var(--px);
  color: #ffbd75;
}
.timing-forge__hud i {
  margin-left: auto;
  font-style: normal;
  color: #8d7867;
}
.timing-forge__control {
  display: grid;
  grid-template-columns: 250px minmax(300px, 1fr) 180px;
  gap: 24px;
  align-items: center;
  padding: 27px;
  border-top: 2px solid #735846;
  background: #17120f;
}
.timing-forge__brief strong {
  display: block;
  margin: 9px 0;
  font: 700 15px var(--px);
}
.timing-forge__brief p {
  margin: 0;
  color: #9c8875;
  font-size: 12px;
  line-height: 1.6;
}
.timing-gauge {
  height: 47px;
  border: 3px solid #6c5342;
  background: #090706;
  padding: 6px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 132, 0.08);
}
.timing-gauge__zones {
  position: absolute;
  inset: 6px;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #24100d 0%,
    #4d1b11 12%,
    #8c2d13 27%,
    #d9511c 38%,
    #ff8a32 45%,
    #ffd166 49%,
    #fff0b5 50%,
    #ffd166 51%,
    #ff8a32 55%,
    #d9511c 62%,
    #8c2d13 73%,
    #4d1b11 88%,
    #24100d 100%
  );
  box-shadow:
    inset 0 4px 8px rgba(255, 226, 153, 0.12),
    inset 0 -7px 10px rgba(20, 4, 0, 0.48);
}
.timing-gauge__zones::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(255, 255, 226, 0.72) 0%,
    rgba(255, 209, 102, 0.24) 15%,
    transparent 39%
  );
  mix-blend-mode: screen;
  pointer-events: none;
}
.timing-gauge > i {
  position: absolute;
  z-index: 3;
  left: 0;
  top: -8px;
  bottom: -8px;
  width: 5px;
  background: #fff3c9;
  box-shadow:
    0 0 5px #fff,
    0 0 15px rgba(255, 190, 72, 0.85);
}
.timing-gauge > span {
  position: absolute;
  top: 55px;
  font: 5px var(--px);
  color: #705e50;
}
.timing-gauge > span:nth-of-type(1) {
  left: 0;
}
.timing-gauge > span:nth-of-type(2) {
  left: 50%;
  translate: -50%;
  color: #c49b69;
}
.timing-gauge > span:nth-of-type(3) {
  right: 0;
}
.timing-forge__hit {
  border: 2px solid #ff9c60;
  background: var(--ember);
  color: #1b0903;
  padding: 15px;
  box-shadow: 5px 5px #6b240c;
  cursor: pointer;
  text-align: left;
}
.timing-forge__hit span,
.timing-forge__hit i {
  display: block;
}
.timing-forge__hit span {
  font: 700 9px var(--px);
}
.timing-forge__hit i {
  margin-top: 6px;
  font: normal 6px var(--px);
  opacity: 0.65;
}
.timing-forge__hit:active {
  translate: 4px 4px;
  box-shadow: 1px 1px;
}
.timing-forge__result {
  grid-column: 2/-1;
  margin-top: 5px;
  padding-top: 15px;
  border-top: 1px solid #4c3a2f;
  display: flex;
  justify-content: space-between;
  color: #b49e89;
  font: 7px var(--px);
}
.timing-forge__result b {
  font-weight: 400;
}
.timing-forge__result em {
  font-style: normal;
  color: #ffd072;
}
.craft-progress {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  color: #8e7967;
  font: 6px var(--px);
}
.craft-progress > div {
  height: 9px;
  border: 1px solid #60493b;
  padding: 2px;
  background: #090706;
}
.craft-progress > div i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #a43110, var(--ember), var(--yellow));
  box-shadow: 0 0 10px var(--ember);
  transition: transform 0.4s steps(5);
}
.craft-progress b {
  color: #d8b99c;
  font-weight: 400;
}
.craft-progress em {
  font-style: normal;
  color: #ffad68;
}
@keyframes asset-hammer-hit {
  0% {
    transform: translateY(0);
  }
  18% {
    transform: translateY(-3%);
  }
  52% {
    transform: translateY(34%);
  }
  60% {
    transform: translateY(31%) scaleY(0.985);
  }
  72% {
    transform: translateY(14%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scene-impact {
  40% {
    transform: translate(3px, 2px);
  }
  60% {
    transform: translate(-3px, -1px);
  }
}
@keyframes impact-flash {
  35% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 3.2;
  }
}
@keyframes asset-sparks {
  to {
    translate: 0 -35px;
    scale: 1.45;
    opacity: 0;
  }
}
@keyframes grade-pop {
  20%,
  65% {
    opacity: 1;
    translate: -50% -50%;
    scale: 1;
  }
  40% {
    scale: 1.12;
  }
  100% {
    opacity: 0;
    translate: -50% -100%;
  }
}
@keyframes sword-forged {
  0% {
    opacity: 0.25;
    transform: perspective(900px) rotateX(62deg) rotateZ(-0.7deg) scaleX(0.96);
    filter: brightness(2) blur(3px);
  }
  45% {
    opacity: 1;
    transform: perspective(900px) rotateX(62deg) rotateZ(-0.7deg) scaleX(1.02);
    filter: brightness(2.2) drop-shadow(0 0 24px #ff7a26);
  }
  100% {
    transform: perspective(900px) rotateX(62deg) rotateZ(-0.7deg) scaleX(1);
  }
}
@media (max-width: 900px) {
  .playground-head {
    grid-template-columns: 1fr;
  }
  .playground-head > p {
    display: none;
  }
  .timing-forge__control {
    grid-template-columns: 1fr 170px;
  }
  .timing-forge__brief {
    grid-column: 1/-1;
  }
  .timing-forge__result {
    grid-column: 1/-1;
  }
  .timing-forge__hammer {
    left: 36%;
    width: 28%;
    top: -38%;
  }
}
@media (max-width: 580px) {
  .timing-forge__top b {
    display: none;
  }
  .timing-forge__stage {
    aspect-ratio: 4/3;
  }
  .timing-forge__scene {
    object-position: center;
  }
  .timing-forge__hammer {
    left: 32%;
    width: 36%;
    top: -27%;
  }
  .timing-forge__hud {
    left: 10px;
    right: 10px;
    bottom: 9px;
  }
  .timing-forge__hud i {
    display: none;
  }
  .timing-forge__control {
    grid-template-columns: 1fr;
    padding: 20px 15px;
    gap: 20px;
  }
  .timing-forge__hit {
    margin-top: 20px;
  }
  .timing-forge__result {
    grid-column: 1;
  }
  .timing-gauge > span {
    display: none;
  }
}

/* FORGE CYCLE — keep or melt build verdict. */
.cycle {
  background: var(--paper2);
  overflow: hidden;
}
.verdict-head {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 390px);
  gap: 40px;
  align-items: end;
}
.verdict-head > p {
  margin: 0 0 8px;
  padding-left: 20px;
  border-left: 2px solid var(--ember);
  color: var(--soft);
  line-height: 1.8;
}
.build-verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-rows: auto 1fr;
  border: 3px solid var(--ink);
  background: #0d0a08;
  color: var(--paper2);
  box-shadow: 13px 15px rgba(33, 28, 22, 0.3);
  position: relative;
  overflow: hidden;
}
.build-verdict::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background: repeating-linear-gradient(0deg, transparent 0 4px, #fff 5px);
}
.build-verdict.is-keep {
  animation: verdict-keep 0.55s steps(5);
}
.build-verdict.is-melt {
  animation: verdict-melt 0.65s steps(6);
}
.build-verdict__progress {
  grid-column: 1/-1;
  height: 52px;
  padding: 0 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  border-bottom: 2px solid #655043;
  background: #2b211b;
  color: #9b836f;
  font: 7px var(--px);
}
.build-verdict__progress > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.build-verdict__progress i {
  height: 5px;
  background: #4b3a30;
}
.build-verdict__progress i.active {
  background: var(--ember);
  box-shadow: 0 0 11px var(--ember);
}
.build-verdict__progress b {
  font-weight: 400;
  color: #d2bba2;
}
.build-verdict__card {
  min-height: 570px;
  padding: 55px;
  position: relative;
  display: flex;
  flex-direction: column;
  background: radial-gradient(
    circle at 72% 45%,
    rgba(255, 107, 39, 0.11),
    transparent 42%
  );
}
.build-verdict__index {
  position: absolute;
  right: 45px;
  top: 44px;
  font: 700 clamp(100px, 15vw, 190px)/0.8 var(--px);
  color: #2b221c;
}
.build-verdict__card > small {
  position: relative;
  font: 7px var(--px);
  color: var(--ember);
}
.build-verdict__card h3 {
  position: relative;
  font: 700 clamp(40px, 6vw, 74px)/1.12 var(--px);
  margin: 38px 0 24px;
  max-width: 760px;
}
.build-verdict__card > p {
  position: relative;
  max-width: 620px;
  margin: 0;
  color: #a28d79;
  line-height: 1.85;
}
.build-verdict__question {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid #4d3b31;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 25px;
  align-items: center;
}
.build-verdict__question span {
  font: 6px var(--px);
  color: #8c7664;
}
.build-verdict__question b {
  font: 700 15px var(--px);
  color: #d7c0a6;
}
.build-verdict__history {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 22px;
}
.build-verdict__history span {
  padding: 10px 8px;
  border: 1px solid #49382f;
  color: #6d5c4e;
  font: 6px var(--px);
}
.build-verdict__history span.done {
  border-color: #557c5d;
  color: #6ddc88;
}
.build-verdict__history span.current {
  border-color: var(--ember);
  color: #ff9f69;
}
.build-verdict__judge {
  border-left: 2px solid #5b4639;
  background: #16110e;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}
.build-verdict__lamp {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: #a48e79;
  font: 7px/1.7 var(--px);
}
.build-verdict__lamp i {
  width: 14px;
  height: 14px;
  border: 3px solid #654f40;
  background: var(--yellow);
  box-shadow: 0 0 16px var(--yellow);
  animation: live-pulse 1.4s steps(2) infinite;
}
.build-verdict__judge button {
  padding: 22px 17px;
  border: 2px solid #604b3d;
  background: #211914;
  color: var(--paper2);
  cursor: pointer;
  text-align: left;
  transition: 0.15s;
}
.build-verdict__judge button span,
.build-verdict__judge button small {
  display: block;
}
.build-verdict__judge button span {
  font: 700 15px var(--px);
}
.build-verdict__judge button small {
  margin-top: 10px;
  color: #8d7765;
  font: 6px var(--px);
}
.build-verdict__keep:hover,
.build-verdict__keep:focus-visible {
  border-color: #68df8a;
  color: #68df8a;
  translate: 5px 0;
}
.build-verdict__melt:hover,
.build-verdict__melt:focus-visible {
  border-color: var(--ember);
  color: var(--ember);
  translate: 5px 0;
}
.build-verdict__judge > p {
  margin: 18px 0 0;
  padding-top: 17px;
  border-top: 1px solid #49382f;
  color: #7f6b5b;
  font: 6px/1.8 var(--px);
}
.build-verdict.is-complete .build-verdict__lamp i {
  background: #68df8a;
  box-shadow: 0 0 18px #68df8a;
}
.build-verdict.is-complete .build-verdict__keep {
  background: #68df8a;
  color: #102115;
  border-color: #a8ffbd;
}
.build-verdict.is-complete .build-verdict__melt {
  opacity: 0.5;
}
.build-verdict.is-complete .build-verdict__index {
  color: #17361f;
}
@keyframes verdict-keep {
  45% {
    box-shadow: inset 0 0 120px rgba(104, 223, 138, 0.24);
  }
}
@keyframes verdict-melt {
  35% {
    box-shadow: inset 0 0 170px rgba(255, 107, 39, 0.42);
  }
  50% {
    filter: brightness(1.55);
  }
}
@media (max-width: 820px) {
  .verdict-head {
    grid-template-columns: 1fr;
  }
  .verdict-head > p {
    display: none;
  }
  .build-verdict {
    grid-template-columns: 1fr 230px;
  }
  .build-verdict__card {
    padding: 40px 30px;
  }
  .build-verdict__index {
    right: 25px;
  }
  .build-verdict__judge {
    padding: 20px;
  }
}
@media (max-width: 600px) {
  .build-verdict {
    grid-template-columns: 1fr;
  }
  .build-verdict__progress {
    grid-template-columns: auto 1fr;
    padding-inline: 14px;
  }
  .build-verdict__progress > b {
    display: none;
  }
  .build-verdict__card {
    min-height: 520px;
    padding: 32px 18px;
  }
  .build-verdict__index {
    font-size: 90px;
    top: 35px;
  }
  .build-verdict__card h3 {
    font-size: 35px;
    margin-top: 52px;
  }
  .build-verdict__question {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .build-verdict__history {
    grid-template-columns: 1fr 1fr;
  }
  .build-verdict__judge {
    border-left: 0;
    border-top: 2px solid #5b4639;
  }
  .build-verdict__lamp {
    margin-bottom: 5px;
  }
}

/* ABOUT — dedicated night workshop scene. */
.studio--night {
  min-height: 850px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 110px max(5vw, calc((100vw - 1240px) / 2)) 90px !important;
  background: #090706 !important;
  color: var(--paper2);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.studio-night__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("/images/about-workshop-night.png") 42% center/cover no-repeat;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.studio--night::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0 37%,
      rgba(7, 5, 4, 0.6) 55%,
      rgba(7, 5, 4, 0.97) 100%
    ),
    linear-gradient(0deg, rgba(5, 4, 3, 0.4), transparent 40%);
}
.studio--night:hover .studio-night__bg {
  transform: scale(1.025);
}
.studio-night__copy {
  width: min(510px, 42vw);
  display: flex;
  flex-direction: column;
}
.studio-night__copy .label {
  color: #d99564;
}
.studio-night__copy h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 27px 0 32px;
  font: 700 clamp(36px, 4.5vw, 62px)/1.14 var(--px);
  letter-spacing: -0.045em;
}
.studio-night__copy h2 span {
  display: block;
  white-space: nowrap;
}
.studio-night__copy h2 span:last-child {
  color: var(--ember);
}
.studio-night__copy > p {
  max-width: 470px;
  margin: 0;
  color: #c6b7a3;
  line-height: 1.9;
}
.studio-night__copy blockquote {
  margin: 55px 0 0;
  padding-top: 24px;
  border-top: 1px solid #725946;
  font: 700 clamp(16px, 1.6vw, 21px)/1.7 var(--px);
  color: #ffd08b;
}
.studio-night__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 35px;
}
.studio-night__meta span {
  padding: 8px 9px;
  border: 1px solid #5b4739;
  color: #9e8874;
  font: 6px var(--px);
}
.studio-night__caption {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 25px;
  display: flex;
  justify-content: space-between;
  color: #806c5c;
  font: 6px var(--px);
}
.studio-night__caption b {
  font-weight: 400;
  color: #65d986;
}
@media (max-width: 900px) {
  .studio--night {
    min-height: 900px !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
  }
  .studio-night__bg {
    background-position: 34% center;
  }
  .studio--night::after {
    background: linear-gradient(
      0deg,
      #080605 0,
      rgba(8, 6, 5, 0.96) 42%,
      rgba(8, 6, 5, 0.2) 78%
    );
  }
  .studio-night__copy {
    width: min(650px, 90vw);
  }
  .studio-night__copy h2 {
    font-size: clamp(38px, 7.8vw, 58px);
  }
}
@media (max-width: 560px) {
  .studio--night {
    min-height: 820px !important;
    padding: 95px 18px 70px !important;
  }
  .studio-night__bg {
    background-position: 31% center;
  }
  .studio-night__copy {
    width: 100%;
  }
  .studio-night__copy h2 {
    font-size: clamp(30px, 9vw, 42px);
    gap: 5px;
    margin-block: 20px 24px;
  }
  .studio-night__copy h2 span {
    white-space: nowrap;
  }
  .studio-night__copy > p {
    font-size: 14px;
  }
  .studio-night__copy blockquote {
    font-size: 15px;
    margin-top: 36px;
  }
  .studio-night__caption {
    left: 18px;
    right: 18px;
  }
  .studio-night__caption span {
    display: none;
  }
}