/* ---------- nav badge ---------- */
.nav-new { font-size: 9px; padding: .12rem .4rem; border-radius: 999px; background: var(--iris); color: var(--white); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 10px -4px rgba(139, 92, 255, .6); }

/* ---------- forge layout ---------- */
.forge {
  --tier: var(--pop);
  max-width: var(--max); margin: 0 auto; padding: 1.5rem var(--gutter) 0;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.25rem, 1rem + 2vw, 3rem); align-items: start;
}
.forge-stage {
  position: sticky; top: 96px; height: min(78svh, 720px); min-height: 520px; overflow: hidden; isolation: isolate;
  border: var(--border); border-radius: var(--radius-xl); box-shadow: var(--bevel), var(--shadow-lg); color: var(--ink);
  background:
    radial-gradient(55% 40% at 55% 62%, color-mix(in oklab, var(--tier) 22%, transparent), transparent 72%),
    linear-gradient(180deg, #ffffff 0%, #fafbfd 50%, #eceef5 100%);
  transition: background var(--duration-slow) var(--ease-out-expo);
}
.forge-stage::before {
  content: ''; position: absolute; left: -25%; right: -25%; bottom: -6%; height: 48%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(14, 16, 34, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 16, 34, .06) 1px, transparent 1px);
  background-size: 44px 44px; transform: perspective(600px) rotateX(64deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 50%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%);
}
.forge-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.forge-stage canvas:active { cursor: grabbing; }
.forge-hud { position: relative; z-index: 1; padding: clamp(1.2rem, 1rem + 1.5vw, 2rem); pointer-events: none; }
.forge-name { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem); font-weight: 900; max-width: 14ch; }
.forge-meta { margin: .5rem 0 1rem; color: var(--ink-2); font-weight: 700; font-size: var(--text-sm); }
.forge-price { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.forge-price b { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); letter-spacing: -.04em; color: var(--tier); text-shadow: 0 1px 0 color-mix(in oklab, var(--tier) 80%, black), 0 2px 0 color-mix(in oklab, var(--tier) 70%, black), 0 3px 0 color-mix(in oklab, var(--tier) 60%, black), 0 18px 24px color-mix(in oklab, var(--tier) 35%, transparent); transition: color var(--duration-normal); }
.forge-price b.flash { animation: price-flash 600ms var(--ease-spring); }
.forge-price s { color: var(--ink-3); font-weight: 700; }
.forge-per { margin: .3rem 0 1rem; font-weight: 700; color: var(--ink-2); }
.forge-meter { width: min(260px, 70%); height: 10px; border-radius: 999px; background: var(--paper-3); box-shadow: inset 0 1px 2px rgba(14, 16, 34, .12); overflow: hidden; }
.forge-meter span { display: block; height: 100%; width: var(--fill, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--tier), color-mix(in oklab, var(--tier) 40%, white)); transition: width 700ms var(--ease-spring); }
.forge-meter-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-top: .4rem; font-weight: 700; }
.forge-drag { position: absolute; bottom: 1rem; width: 100%; text-align: center; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin: 0; pointer-events: none; }
.forge.no-webgl .forge-stage canvas { display: none; }

.forge-panel { display: grid; gap: var(--space-6); }
.forge-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.forge-step legend, .legend-like { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: .8rem; padding: 0; }
.forge-step legend small, .legend-like small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-3); font-weight: 700; margin-left: auto; }
.step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(180deg, var(--pop-2), var(--pop)); color: var(--white); font-size: .85rem; flex: none; box-shadow: var(--bevel-color), var(--shadow-sm); }

/* worlds */
.world-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
.world-btn {
  position: relative; display: grid; justify-items: center; gap: .3rem; padding: .6rem .3rem .55rem;
  background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--bevel), var(--shadow-sm);
  font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center;
  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast), background var(--duration-normal);
}
.world-btn img { width: 48px; height: 48px; filter: drop-shadow(0 6px 5px rgba(14, 16, 34, .16)); transition: transform var(--duration-normal) var(--ease-spring); }
.world-btn:hover { transform: translateY(-3px); box-shadow: var(--bevel), var(--shadow-md); }
.world-btn:hover img { transform: scale(1.12) rotate(-6deg); }
.world-btn[aria-pressed='true'] { background: color-mix(in oklab, var(--tier) 22%, white); box-shadow: var(--shadow-md), inset 0 0 0 2px var(--tier); }
.world-btn[aria-pressed='true']::after { content: '✓'; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--tier); color: var(--white); border: 2px solid var(--white); box-shadow: var(--shadow-sm); font-size: 12px; animation: pop-in 300ms var(--ease-spring); }
.world-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* tiers */
.tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.tier-card { position: relative; cursor: pointer; }
.tier-card input { position: absolute; opacity: 0; pointer-events: none; }
.tier-inner {
  display: block; height: 100%; padding: 1rem 1rem .9rem; background: var(--white); border: var(--border); border-radius: var(--radius);
  box-shadow: var(--bevel), var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast), background var(--duration-normal);
}
.tier-inner b { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: 1.2rem; }
.tier-inner b::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--tier); box-shadow: 0 0 0 4px color-mix(in oklab, var(--tier) 20%, transparent); }
.tier-inner small { display: block; color: var(--ink-2); font-weight: 700; margin: .2rem 0 .5rem; }
.tier-inner ul { margin: 0; padding-left: 1.1rem; font-size: var(--text-sm); color: var(--ink-2); }
.tier-flag { position: absolute; top: -11px; right: 12px; padding: .2rem .55rem; border-radius: 999px; background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tier-card:hover .tier-inner { transform: translateY(-3px); box-shadow: var(--bevel), var(--shadow-md); }
.tier-card input:checked + .tier-inner { background: color-mix(in oklab, var(--tier) 20%, white); box-shadow: var(--shadow-md), inset 0 0 0 2px var(--tier); }
.tier-card input:focus-visible + .tier-inner { outline: 3px solid var(--pop); outline-offset: 3px; }

/* price map */
.matrix-wrap { overflow-x: auto; border: var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--bevel), var(--shadow-sm); }
.matrix { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.matrix th, .matrix td { padding: .3rem; text-align: center; border-bottom: var(--border); }
.matrix thead th { font-family: var(--font-display); font-size: .8rem; padding: .6rem .3rem; border-bottom: 3px solid var(--tier); }
.matrix tbody th { font-family: var(--font-display); width: 64px; color: var(--ink-2); }
.matrix tr:last-child > * { border-bottom: 0; }
.matrix [data-cell] {
  width: 100%; padding: .55rem .3rem; border: 2px solid transparent; border-radius: 10px; background: none; font-weight: 700;
  transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-spring), border-color var(--duration-fast);
}
.matrix [data-cell]:hover { background: color-mix(in oklab, var(--tier) 18%, white); transform: scale(1.05); }
.matrix [data-cell].is-current { background: var(--tier); color: var(--white); box-shadow: var(--bevel-color), 0 10px 18px -8px var(--tier); transform: scale(1.06); }

.forge-cta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ---------- bundle cards: white slab with iridescent foil ---------- */
.bundle-card { --tier: var(--pop); background: linear-gradient(180deg, #ffffff, #f7f8fc); }
.bundle-card::before { content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--tier); box-shadow: 0 4px 14px var(--tier); }
.bundle-card .card-cat { color: var(--tier); }
.bundle-name { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -.02em; -webkit-line-clamp: 2; }
.badge-tier { background: var(--tier); color: var(--white); }
.holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .3;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 116, 196, .8) 35%, rgba(124, 242, 255, .8) 45%, rgba(255, 201, 60, .8) 55%, transparent 70%);
  background-size: 250% 250%; background-position: var(--gx, 50%) var(--gy, 50%); transition: opacity var(--duration-normal);
}
.bundle-card:hover .holo { opacity: .7; }
.world-dots { display: flex; gap: 0; list-style: none; padding: 0; margin: .65rem 0 0; }
.world-dots li { width: 34px; height: 34px; margin-right: -8px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 2px solid var(--white); box-shadow: var(--shadow-sm); }
.bundle-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

/* ---------- home teaser ---------- */
.forge-teaser-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: end; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.forge-teaser-copy p { font-size: var(--text-lg); color: var(--ink-2); }

/* ---------- bundle product page ---------- */
.forge-viewer { --tier: var(--pop); background: radial-gradient(55% 40% at 50% 60%, color-mix(in oklab, var(--tier) 22%, transparent), transparent 72%), linear-gradient(180deg, #ffffff 0%, #fafbfd 50%, #eceef5 100%); }
.pdp-sub { color: var(--ink-2); margin-top: -.4rem; }
.pdp-h2 { font-size: 1.2rem; margin: var(--space-6) 0 .7rem; }
.world-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: .5rem; }
.world-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: .8rem; align-items: center; padding: .5rem .8rem; background: var(--white); border: var(--border); border-radius: var(--radius); }
.world-list small { display: block; color: var(--ink-2); }
.world-list a { font-weight: 700; font-size: var(--text-sm); text-decoration: none; }

/* product page upsell */
.forge-upsell {
  display: grid; grid-template-columns: 44px 1fr auto; gap: .8rem; align-items: center; margin-top: .8rem; padding: .85rem 1rem;
  background: linear-gradient(180deg, #f3f3ff, var(--pop-tint)); color: var(--ink); border: 1px solid #d9d9ff; border-radius: var(--radius); text-decoration: none; box-shadow: var(--bevel), var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal);
}
.forge-upsell:hover { transform: translateY(-2px); box-shadow: var(--bevel), var(--shadow-md); }
.forge-upsell small { display: block; color: var(--ink-2); }
.forge-upsell i { font-style: normal; font-size: 1.4rem; color: var(--pop); }
.line-name { text-decoration: none; }

@keyframes price-flash { 30% { transform: scale(1.12) rotate(-2deg); } }

@media (max-width: 1024px) {
  .forge { grid-template-columns: 1fr; }
  .forge-stage { position: relative; top: 0; height: 62svh; min-height: 440px; }
  .forge-teaser-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .world-grid { grid-template-columns: repeat(3, 1fr); }
  .tier-grid { grid-template-columns: 1fr; }
  .forge-cta .btn { flex: 1 1 100%; }
}

/* ---------- inside the pack ---------- */
.inside-stats { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: flex; flex-wrap: wrap; gap: .7rem; }
.inside-stats li { display: grid; padding: .8rem 1.1rem; min-width: 150px; background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--bevel), var(--shadow-sm); }
.inside-stats b { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
.inside-stats span { font-size: var(--text-sm); color: var(--ink-2); font-weight: 700; }
.inside-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.inside-grid li { background: var(--white); border: var(--border); box-shadow: var(--shadow-xs); border-radius: var(--radius-sm); overflow: hidden; transition: transform var(--duration-normal) var(--ease-spring); }
.inside-grid li:hover { transform: translateY(-4px) rotate(-2deg) scale(1.06); }
.inside-grid img { width: 100%; aspect-ratio: 1; }
.inside-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-2); }

/* ---------- order downloads ---------- */
.order-note { color: var(--ink-2); max-width: 70ch; }
.order-lines .order-bundle { grid-template-columns: 72px 1fr; align-items: start; }
.world-downloads { grid-column: 1 / -1; list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .45rem; }
.world-downloads li { display: grid; grid-template-columns: 36px 1fr auto; gap: .7rem; align-items: center; padding: .45rem .6rem; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); }
.world-downloads small { display: block; color: var(--ink-2); }