/** Shopify CDN: Minification failed

Line 9:0 Unexpected "{"
Line 9:1 Expected identifier but found "%"
Line 1009:0 Unexpected "{"
Line 1009:1 Expected identifier but found "%"

**/
{% style %}
/* ===== Pre-Con Builder (template suffix: pre-con-builder) ===== */
/* Consolidated styles. One D2 theme block is shared by modal, summary, and nameplate. */

/* ========== D2 Theme Tokens (custom properties) ========== */
.d2-theme,
.builder-modal--runeword,
.precon__left--runeword,
.nameplate--runeword {
  --d2-gold: #c8b574;
  --d2-blue: #70a0ff;
  --d2-gray: #b7b7b7;
  --d2-red: #b03030;
  --d2-border: #3b3f4f;
  --d2-bg-900: #121318;
  --d2-bg-800: #171921;
  --d2-bg-700: #151821;
}

/* ========== Layout ========== */
.temp_pre-con-builder .precon {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 20px 28px;
  background: #0b0d12;
  border: 1px solid #2e323d;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr 520px 360px; /* summary | center | right */
  grid-template-rows: auto auto;          /* allow actions to sit below center */
  grid-template-areas:
    "summary center right"
    "summary actions right";
  gap: 28px;
}

/* Optional: make summary full-width at bottom by adding class 'precon--summary-bottom' */
.temp_pre-con-builder .precon.precon--summary-bottom {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 540px 360px;
  grid-template-areas:
    "center center right"
    "summary summary summary";
}

/* ========== Section titles ========== */
.temp_pre-con-builder .precon__heading {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 28px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e2e4e9;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #2a2c33;
  border-radius: 6px;
  border: 1px solid #3a3d48;
}

/* ========== Summary (LEFT) ========== */
.temp_pre-con-builder .precon__left { grid-area: summary; min-width: 0; }

.temp_pre-con-builder .summary-table-container {
  position: static;
  background: #121318;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #2e323d;
  box-shadow: inset 0 0 0 1px #1b1e26;
  color: #e2e4e9;
  max-height: none;
}

.temp_pre-con-builder #summary-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.temp_pre-con-builder #summary-table th {
  color: #8c7bd7;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 10px 12px;
  text-align: left;
}

.temp_pre-con-builder #summary-table td {
  background: #161922;
  border-bottom: 1px solid #262a36;
  padding: 10px 12px;
}

.temp_pre-con-builder #summary-table th:first-child,
.temp_pre-con-builder #summary-table td:first-child { width: 80px; }
.temp_pre-con-builder #summary-table th:last-child,
.temp_pre-con-builder #summary-table td:last-child { width: 120px; }
.temp_pre-con-builder #summary-table th:nth-child(2),
.temp_pre-con-builder #summary-table td:nth-child(2) { width: calc(100% - 160px); }

.temp_pre-con-builder #summary-table img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
  padding: 5px;
}

.temp_pre-con-builder #total-price {
  color: #ae6bf2;
  border-top: 1px solid #2e323d;
  margin-top: 12px;
  padding-top: 10px;
  text-align: right;
}

/* D2 skin for LEFT summary (applies after runeword is generated) */
.precon__left--runeword .summary-table-container {
  background: linear-gradient(180deg, rgba(18,19,24,.96) 0%, rgba(18,19,24,.9) 100%);
  border: 1px solid var(--d2-border);
  box-shadow: 0 16px 48px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}
.precon__left--runeword #summary-table th {
  color: var(--d2-gold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.precon__left--runeword #summary-table td {
  background: var(--d2-bg-700);
  border-bottom: 1px solid var(--d2-border);
  color: #e2e4e9;
}
.precon__left--runeword #summary-table td:last-child {
  color: var(--d2-gold);
  font-weight: 600;
}
.precon__left--runeword #total-price {
  color: var(--d2-gold);
  border-top: 1px solid var(--d2-border);
}

/* ========== Center preview ========== */
.temp_pre-con-builder .precon__center { grid-area: center; display: flex; flex-direction: column; align-items: center; }

.temp_pre-con-builder .preview-stage {
  background: #1c1e24;
  border: 1px solid #2e323d;
  border-radius: 8px;
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.temp_pre-con-builder .preview-cube {
  width: 340px;
  height: 360px;
  max-width: 100%;
  margin: 4px auto 14px;
  display: block;
}

.temp_pre-con-builder .nameplate {
  width: 360px;
  max-width: 92%;
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 14px 10px;
  text-align: center;
  color: #fff;
  background: #0b0d12;
  font-family: 'Chakra Petch', sans-serif;
  line-height: 1.55;
}
.temp_pre-con-builder .nameplate__accent {
  color: #ffffff;
  font-weight: 600;
}

/* Nameplate switches to runeword look */
.nameplate--runeword {
  border-color: var(--d2-border);
  background: #12141b;
  color: var(--d2-gold);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ========== Buttons (CREATE / ADD TO CART / START OVER) ========== */
.temp_pre-con-builder .precon__actions { grid-area: actions; text-align: center; }
.temp_pre-con-builder .precon__create {
  margin: 16px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  height: 56px;
  background: #ae6bf2;
  color: #0b0d12;
  border: none;
  border-radius: 6px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.temp_pre-con-builder .precon__create:disabled { opacity: .45; cursor: not-allowed; }
.temp_pre-con-builder .precon__create:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(174,107,242,.25); }

/* After runeword generated → becomes “ADD TO CART” color */
.precon__create--ready {
  background: var(--d2-gold);
  color: #0b0d12;
}

/* START OVER button */
.precon__startover {
  margin: 10px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 44px;
  background: transparent;
  color: var(--d2-gray);
  border: 1px solid var(--d2-border);
  border-radius: 6px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.precon__startover:hover { color: #e2e4e9; border-color: #505669; }

/* ========== Right panel (selectors) ========== */
.temp_pre-con-builder .precon__right  { grid-area: right;   min-width: 0; }

.temp_pre-con-builder .precon__right .precon-panel {
  background: #0f1118;
  border: 1px solid #2e323d;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}
.temp_pre-con-builder .precon-panel__title {
  padding: 10px 12px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8c7bd7;
  background: repeating-linear-gradient(135deg, #12131a 0 6px, #141821 6px 12px);
  border-bottom: 1px solid #2a2d38;
}
.temp_pre-con-builder .precon-panel__body { padding: 12px; }
.temp_pre-con-builder .precon__right .variant-selector {
  width: 100%;
  background: #141823;
  color: #e2e4e9;
  border: 1px solid #303444;
  border-radius: 6px;
  padding: 10px 12px;
}

/* ========== Product Notice (Lead Time / Image Disclaimer) ========== */
.product-image-notice {
  margin-top: 24px;
  padding: 18px;
  background: #1c1e24;
  border: 1px solid #2e323d;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #caced4; /* A slightly softer white */
  font-size: 13px;
  line-height: 1.6;
}
.product-image-notice .notice-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.product-image-notice p {
  margin: 0;
}

/* ========== Responsive ========== */
@media (max-width: 1200px) {
  .temp_pre-con-builder .precon {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "center"
      "right"
      "actions"
      "summary";
  }
  .temp_pre-con-builder .precon__create { width: 100%; }
  .product-image-notice {
    margin-top: 16px;
  }
}

@media (min-width: 1440px) {
  .temp_pre-con-builder .precon {
    max-width: 1920px;
    grid-template-columns: 1fr 640px 420px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "summary center right"
      "summary actions right";
    gap: 32px;
  }
  .temp_pre-con-builder .preview-cube { width: 380px; height: 400px; }
  .temp_pre-con-builder .nameplate { width: 400px; }
}

/* ========== Builder Modal (base) ========== */
.builder-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.builder-modal.is-open { display: flex; }

.builder-modal__panel {
  width: min(720px, 96vw);
  max-height: 90vh;
  background: #171921;
  border: 1px solid #2e323d;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto auto;
  overflow: hidden;
  position: relative;
}

.builder-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  color: #8c7bd7;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: transform .18s ease, color .18s ease;
}
.builder-modal__close:hover { transform: rotate(90deg) scale(1.05); color: #c395f1; }

.builder-modal__header {
  padding: 18px 22px 10px;
  border-bottom: 1px solid #2a2d38;
  background: linear-gradient(180deg, rgba(23,25,33,.95) 0%, rgba(23,25,33,.85) 100%);
}
.builder-modal__header h2 {
  margin: 0 0 4px 0;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .06em;
  color: #e2e4e9;
  text-transform: uppercase;
}
.builder-modal__sub {
  margin: 0;
  color: #8c7bd7;
  font-size: 12px;
  letter-spacing: .08em;
}

.builder-modal__body {
  padding: 12px 22px;
  overflow: auto;
}

.builder-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.builder-modal__item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #1c1f28;
  border: 1px solid #2e323d;
  border-radius: 8px;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  position: relative;
  overflow: hidden;
}
.builder-modal__item:hover,
.builder-modal__item:focus-within {
  transform: translateY(-2px);
  border-color: #3a3f50;
  background: linear-gradient(180deg,#1c1f28 0%, #1a1d26 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(174,107,242,.18) inset;
}
.builder-modal__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.builder-modal__item:hover::after { transform: translateX(120%); }

.builder-modal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ae6bf2;
  margin-left: 8px;
  animation: builder-pulse 2.2s ease-in-out infinite;
}
@keyframes builder-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(174,107,242,.45); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(174,107,242,0); }
}

.builder-modal__name { color: #e2e4e9; font-size: 14px; line-height: 1.4; }
.builder-modal__price { color: #ae6bf2; font-weight: 600; font-size: 14px; margin-left: 12px; white-space: nowrap; }

.builder-modal__total {
  padding: 12px 22px;
  border-top: 1px solid #2a2d38;
  color: #ae6bf2;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: right;
  background: #171921;
  transition: box-shadow .22s ease, background-color .22s ease;
}

.builder-modal__footer {
  padding: 16px 22px 20px;
  background: #171921;
  display: flex;
  justify-content: flex-end;
}
.builder-modal__cta {
  min-width: 200px;
  height: 48px;
  border: 0;
  border-radius: 6px;
  background: #ae6bf2;
  color: #0b0d12;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s;
  position: relative;
  overflow: hidden;
}
.builder-modal__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(174,107,242,.3); }
.builder-modal__cta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 46%;
  left: -60%;
  background: linear-gradient(115deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.35) 40%, rgba(255,255,255,.0) 70%);
  transform: skewX(-18deg);
  transition: left .5s ease;
  pointer-events: none;
}
.builder-modal__cta:hover::after { left: 120%; }

.builder-modal__footer:hover ~ .builder-modal__total,
.builder-modal__total:hover {
  box-shadow: inset 0 1px 0 rgba(174,107,242,.25);
  background-color: #151821;
}

/* Focus styles for accessibility */
.builder-modal__item:focus-within { outline: 2px solid rgba(174,107,242,.6); outline-offset: 2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .builder-modal.is-open,
  .builder-modal.is-open .builder-modal__panel,
  .builder-modal__item,
  .builder-modal__cta,
  .builder-modal__close,
  .builder-modal__item::after,
  .builder-modal__dot {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ========== Diablo II Runeword skin (modal header + stats + sockets) ========== */
.builder-modal--runeword .builder-modal__header h2 {
  color: var(--d2-gold);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
}
.builder-modal--runeword .builder-modal__sub.d2-subline {
  margin: 0;
  color: var(--d2-gray);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
}

.d2-sockets {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.d2-socket {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 50% 50%, #1f2230 0%, #0b0d12 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  border: 1px solid #4a4f63;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.4);
}

.d2-stats {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0 0 6px 0;
  border-bottom: 1px solid var(--d2-border);
}
.d2-stats li {
  color: var(--d2-blue);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .02em;
}
.d2-stats .d2-emph { color: var(--d2-gold); }

/* Keep modal items readable under D2 theme */
.builder-modal--runeword .builder-modal__item { background: var(--d2-bg-700); border-color: var(--d2-border); }
.builder-modal--runeword .builder-modal__name { color: #e2e4e9; }
.builder-modal--runeword .builder-modal__price { color: var(--d2-gold); }

/* ========== Option Choice Modal + Carousel ========== */
.option-modal__title {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .06em;
  color: #e2e4e9;
  text-transform: uppercase;
}

.option-grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.option-card {
  background: #1a1a1a;
  border: 1px solid #2e323d;
  border-radius: 10px;
  width: 300px;
  padding: 16px 16px 14px;
  text-align: center;
}
.option-card img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 8px;
  margin: 0 auto 12px;
  display: block;
  background: #0f1118;
}
.option-card__title {
  font-weight: 600;
  color: #e2e4e9;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.25;
}
.option-card__btn {
  width: 100%;
  background: #ae6bf2;
  color: #fff;
  padding: 12px 14px;
  border: none;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}

.option-carousel { position: relative; padding: 8px 44px; }
.oc-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #2e323d;
  border-radius: 10px;
  background: #14161d;
  padding: 8px 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -ms-overflow-style: none;      /* IE/Edge */
  scrollbar-width: none;         /* Firefox */
}
.oc-viewport::-webkit-scrollbar { display: none; } /* WebKit */

.oc-track {
  display: flex;
  gap: 0;
  will-change: auto;
  transition: none;
}

.oc-slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  scroll-snap-align: center;
}

.oc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0f1118;
  border: 1px solid #2e323d;
  color: #ae6bf2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.oc-prev { left: 8px; }
.oc-next { right: 8px; }
.oc-nav:disabled { opacity: .35; cursor: not-allowed; }

.oc-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.oc-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e323d; border: 0; }
.oc-dot.is-active { background: #ae6bf2; }

@media (max-width: 1023px) {
  .option-carousel { padding: 8px 36px; }
  .option-card { width: 280px; }
  .option-card img { width: 200px; height: 200px; }
}

@media (min-width: 1024px) {
  .oc-viewport { scroll-snap-type: x proximity; }
  .oc-slide { flex: 0 0 calc(100% / 3); }
}

/* ===== Runeword forging animation ===== */
.builder-modal__panel.is-animating .builder-modal__header,
.builder-modal__panel.is-animating .builder-modal__body,
.builder-modal__panel.is-animating .builder-modal__total,
.builder-modal__panel.is-animating .builder-modal__footer {
  visibility: hidden;
}

.rw-anim {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.builder-modal__panel.is-animating .rw-anim { display: flex; }

.rw-anim__forge {
  position: relative;
  width: min(960px, 96vw);        /* larger and responsive */
  aspect-ratio: 16 / 7;           /* keep a wide cinematic box */
  height: auto;                   /* derived from aspect-ratio */
  border: 1px solid var(--d2-border);
  border-radius: 10px;
  background:
    radial-gradient(60% 80% at 50% 40%, rgba(174,107,242,.16), rgba(23,25,33,.94) 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(174,107,242,.10), 0 12px 40px rgba(0,0,0,.45);
  perspective: 1200px;
}

/* Cube doors */
.rw-anim__cube { position: absolute; inset: 0; }
.rw-anim__door {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 52%;
  background:
    linear-gradient(180deg, #202430, #151923),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 6px, rgba(255,255,255,0) 6px 12px);
  border: 1px solid #3b3f4f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.35);
  transform-style: preserve-3d;
}
.rw-anim__door--left  { left: 6%;  transform-origin: left center;  }
.rw-anim__door--right { right: 6%; transform-origin: right center; }

.rw-anim.is-playing .rw-anim__door--left  { animation: doorOpenLeft .6s cubic-bezier(.22,1,.36,1) .05s forwards; }
.rw-anim.is-playing .rw-anim__door--right { animation: doorOpenRight .6s cubic-bezier(.22,1,.36,1) .05s forwards; }
@keyframes doorOpenLeft  { from { transform: rotateY(0deg); } to { transform: rotateY(-78deg); } }
@keyframes doorOpenRight { from { transform: rotateY(0deg); } to { transform: rotateY( 78deg); } }

/* Shards fly-in */
.rw-anim__shard {
  position: absolute;
  padding: 10px 14px;
  border: 1px solid #3b3f4f;
  background: #0f1118;
  color: #e2e4e9;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
}
.rw-anim__shard--level      { top: 10%;  left: 6%;   transform: translate(-240px,-160px) scale(.9); }
.rw-anim__shard--foundation { bottom: 10%; left: 8%;  transform: translate(-220px,160px)  scale(.9); }
.rw-anim__shard--essence    { top: 14%;  right: 8%;  transform: translate(240px,-160px)  scale(.9); }
.rw-anim__shard--dominion   { bottom: 12%; right: 6%; transform: translate(220px,160px)   scale(.9); }

.rw-anim.is-playing .rw-anim__shard--level      { animation: shardToCenter .85s cubic-bezier(.22,1,.36,1)   .18s forwards; }
.rw-anim.is-playing .rw-anim__shard--foundation { animation: shardToCenter .85s cubic-bezier(.22,1,.36,1)   .26s forwards; }
.rw-anim.is-playing .rw-anim__shard--essence    { animation: shardToCenter .85s cubic-bezier(.22,1,.36,1)   .34s forwards; }
.rw-anim.is-playing .rw-anim__shard--dominion   { animation: shardToCenter .85s cubic-bezier(.22,1,.36,1)   .42s forwards; }

@keyframes shardToCenter {
  0%   { opacity: 0; filter: brightness(.85); } /* start from each shard's own transform above */
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0,0) scale(1); filter: brightness(1); }
}


/* Big flash + expanding ring (layered) */
.rw-anim__flash {
  position: absolute;
  inset: -12%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(2px);
}
/* Core white flash */
.rw-anim__flash::before,
.rw-anim__flash::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.rw-anim__flash::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,1), rgba(255,255,255,0) 52%);
}
.rw-anim__flash::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(200,181,116,.95), rgba(200,181,116,0) 55%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
  filter: blur(2px);
}
/* Peak flash just before reveal (~1.38s) */
.rw-anim.is-playing .rw-anim__flash::before { animation: forgeFlashCore .8s ease-out .95s forwards; }
.rw-anim.is-playing .rw-anim__flash::after  { animation: forgeFlashHalo .9s ease-out .97s forwards; }

@keyframes forgeFlashCore {
  0%   { opacity: 0; transform: scale(.8); }
  55%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.22); }
}
@keyframes forgeFlashHalo {
  0%   { opacity: 0; transform: scale(.9); }
  50%  { opacity: .9; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Stronger shockwave ring */
.rw-anim__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  margin-left: -20px; margin-top: -20px;
  border-radius: 50%;
  border: 3px solid rgba(200,181,116,.95);
  box-shadow: 0 0 36px rgba(200,181,116,.6), inset 0 0 10px rgba(200,181,116,.7);
  opacity: 0;
}
.rw-anim.is-playing .rw-anim__ring { animation: ringExpand .75s cubic-bezier(.22,1,.36,1) 1.0s forwards; }
@keyframes ringExpand {
  from { opacity: 0; transform: scale(.55); }
  50%  { opacity: 1; }
  to   { opacity: 0; transform: scale(5.2); }
}

/* Result name */
.rw-anim__result {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.96);
}
.rw-anim.show-result .rw-anim__result { animation: resultIn .6s cubic-bezier(.22,1,.36,1) forwards; }
.rw-anim__name {
  color: var(--d2-gold);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 18px rgba(200,181,116,.55), 0 0 2px rgba(0,0,0,.8);
}
.rw-anim__name.glow { animation: nameGlow 1.6s ease-in-out 0s 1; }
@keyframes resultIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes nameGlow {
  0% { text-shadow: 0 0 0 rgba(200,181,116,0); }
  40%,60% { text-shadow: 0 0 26px rgba(200,181,116,.75), 0 0 2px rgba(0,0,0,.8); }
  100% { text-shadow: 0 0 14px rgba(200,181,116,.45); }
}

/* Socket pop + stagger reveals */
.d2-socket.pop { animation: socketPop .45s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes socketPop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.d2-stats li,
.builder-modal__item { transition: none; }
.d2-stats li.reveal { animation: fadeUp .28s ease-out forwards; }
.builder-modal__item.reveal { animation: fadeUp .28s ease-out forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Subtle panel shake right after flash */
.builder-modal__panel.is-animating { animation: panelShake .36s ease-in-out 1.22s 1; }
@keyframes panelShake {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(1px, -1px, 0); }
  50% { transform: translate3d(-1px, 1px, 0); }
  75% { transform: translate3d(1px, 0px, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* ===== Forge stage PC + sockets + runes ===== */
.rw-anim__stage { position: absolute; inset: 4% 6%; display: grid; place-items: center; }
.rw-base {
  display: block;
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 84%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.rw-sockets, .rw-runes { position: absolute; inset: 0; pointer-events: none; }

/* Sockets are placed by JS (absolute px), just style the look */
.rw-socket {
  position: absolute;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #4a4f63;
  background:
    radial-gradient(50% 50% at 50% 50%, #1f2230 0%, #0b0d12 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.4);
}
.rw-socket.is-filled {
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(200,181,116,.35), rgba(11,13,18,1) 58%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  box-shadow: 0 0 18px rgba(200,181,116,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Runes that fly in and socket (animate left/top for robust layout) */
.rw-rune {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(200,181,116,.6);
  background:
    radial-gradient(circle at 50% 45%, rgba(200,181,116,.85), rgba(200,181,116,.2) 65%, rgba(200,181,116,0) 75%),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%);
  box-shadow: 0 0 12px rgba(200,181,116,.45);
  opacity: 0;
  transition: left .6s cubic-bezier(.22,1,.36,1), top .6s cubic-bezier(.22,1,.36,1), opacity .25s ease-out;
}
.rw-rune.is-in { opacity: 1; }

/* Preview overlay sized exactly to the image by JS */
.preview-stage { position: relative; }
#preview-sockets {
  position: absolute;
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease;
}
#preview-sockets .ps-socket,
#preview-sockets .ps-rune {
  position: absolute;
  transform: translate(-50%,-50%);
}
#preview-sockets .ps-socket {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid #4a4f63;
  background:
    radial-gradient(50% 50% at 50% 50%, #1f2230 0%, #0b0d12 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.4);
}
#preview-sockets .ps-rune {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(200,181,116,.6);
  background:
    radial-gradient(circle at 50% 45%, rgba(200,181,116,.85), rgba(200,181,116,.2) 65%, rgba(200,181,116,0) 75%),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%);
  box-shadow: 0 0 12px rgba(200,181,116,.45);
}

/* Place actions directly under the preview stage on desktop */
.precon__center .precon__actions { margin-top: 12px; text-align: center; }

/* Ensure CREATE spans full width on smaller screens */
@media (max-width: 1200px) {
  .precon__create { width: 100%; }
}

/* Essence modal specific scroll lock that won't conflict with other scripts */
.essence-modal-open {
  position: fixed !important;
  overflow: hidden !important;
  width: 100%;
}

/* Mobile-first styles for Essence Modal Panel */
@media (max-width: 768px) {
  #essence-choice-modal .builder-modal__panel {
    width: 100vw;
    height: 100vh; /* Fallback */
    height: 100dvh; /* Use dynamic viewport height for mobile */
    max-height: none;
    border-radius: 0;
    grid-template-rows: auto 1fr auto; /* Header, Body (scrollable), Footer */
  }

  #essence-choice-modal .builder-modal__body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  #essence-choice-modal .option-card img {
    max-height: none;
    height: auto;
  }
}

{% endstyle %}