@import url('./notes-mentions.css');

/* Create page — board left, items catalog (identical to /items/) on the right */

.page-create {
  /* The optional game-cursor stylesheet is intentionally not loaded on the
     site (the native cursor is the supported experience). Keep Create's
     existing cursor tokens valid so interactive controls do not silently
     fall back to `auto`. */
  --bpb-cursor-default: default;
  --bpb-cursor-pointer: pointer;
  --bpb-cursor-grab: grab;
  --bpb-cursor-grabbing: grabbing;
  --create-ink: #3c261d;
  --create-cream: #ffecdc;
  /* Keep Filter|Build rail above the fixed Sellbox (chest) */
  --create-sellbin-clearance: 14.5rem;
  /* Build-info essentials tokens (same as .page-build) */
  --build-ink: #3c261d;
  --build-cream: #ffecdc;
  --build-shade: rgba(14, 15, 16, 0.09);
  --build-ui-stroke: 0.1em;
  --build-ui-track: -0.03em;
  --build-ui-ring:
    0.1em 0 0 var(--build-ink),
    0.092em 0.038em 0 var(--build-ink),
    0.071em 0.071em 0 var(--build-ink),
    0.038em 0.092em 0 var(--build-ink),
    0 0.1em 0 var(--build-ink),
    -0.038em 0.092em 0 var(--build-ink),
    -0.071em 0.071em 0 var(--build-ink),
    -0.092em 0.038em 0 var(--build-ink),
    -0.1em 0 0 var(--build-ink),
    -0.092em -0.038em 0 var(--build-ink),
    -0.071em -0.071em 0 var(--build-ink),
    -0.038em -0.092em 0 var(--build-ink),
    0 -0.1em 0 var(--build-ink),
    0.038em -0.092em 0 var(--build-ink),
    0.071em -0.071em 0 var(--build-ink),
    0.092em -0.038em 0 var(--build-ink);
  color: var(--bpb-ink, var(--create-ink));
}

/* Audit baseline for controls rendered by Create and its History overlay.
   Component rules below retain their more specific grab, disabled, and
   intentionally passive cursors. */
.page-create :where(
  a[href]:not([aria-disabled='true']),
  button:not(:disabled):not([aria-disabled='true']),
  summary,
  select:not(:disabled),
  [role='button']:not([aria-disabled='true']),
  [role='tab']:not([aria-disabled='true']),
  [role='option']:not([aria-disabled='true']),
  [role='menuitem']:not([aria-disabled='true']),
  [type='button']:not(:disabled):not([aria-disabled='true']),
  [type='submit']:not(:disabled):not([aria-disabled='true']),
  [type='reset']:not(:disabled):not([aria-disabled='true']),
  [type='checkbox']:not(:disabled):not([aria-disabled='true']),
  [type='radio']:not(:disabled):not([aria-disabled='true']),
  [type='file']:not(:disabled):not([aria-disabled='true']),
  [type='range']:not(:disabled):not([aria-disabled='true'])
) {
  cursor: var(--bpb-cursor-pointer);
}

.page-create :where(button:disabled, [aria-disabled='true']) {
  cursor: var(--bpb-cursor-default);
}

.page-create .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.create-main {
  /* Match Item Library — lower filter rows must not clip on desktop. */
  --create-rail-width: 32rem;
  --items-filters-width: var(--create-rail-width);
  --items-side-gap: 1rem;
  /* Leave room for the board; the catalog shares the remaining column. */
  --items-catalog-width: min(
    36rem,
    calc(100vw - var(--items-filters-width) - 40rem - 4 * var(--items-side-gap))
  );
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem var(--items-side-gap) 0.75rem;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Keep the shared slim footer on-screen while the editor uses the remaining
   viewport height inside the fixed Create shell. */
body.page-create #site-footer {
  flex: 0 0 auto;
  z-index: 1;
}

.create-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--items-side-gap);
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.create-layout--skel {
  min-height: 28rem;
}

.create-skel-panel {
  min-height: 24rem;
  width: 100%;
}

.create-skel-board {
  margin-top: 0.75rem;
  min-height: 18rem;
  width: 100%;
  aspect-ratio: 9 / 7;
}

.create-col--board {
  --build-catalog-width: min(
    clamp(30rem, 35vw, 56rem),
    calc(100vw - var(--create-rail-width) - 22rem - 4 * var(--items-side-gap))
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: var(--build-catalog-width);
  max-width: 100%;
  padding: 0.5rem 0.25rem;
  /* Let bag sprites spill past the board AABB (game Icon overhang); no column scroll */
  overflow: visible;
}

.page-create .create-col--catalog.items-main {
  /* Keep the Create rail aligned with the full Item Library rail. */
  --items-filters-width: var(--create-rail-width);
  --items-catalog-width: min(
    36rem,
    calc(100vw - var(--items-filters-width) - 40rem - 4 * var(--items-side-gap))
  );
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}

/* Nest the items catalog layout: bag | filters (no outer 1fr gutters).
   Same scroll model as /items/: constrain height so .bpb-bg overflows. */
.page-create .create-col--catalog .items-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.page-create .create-col--catalog .items-layout {
  grid-template-columns: minmax(0, 1fr) auto;
  /* Critical: default row min is min-content, which blocks bag scroll */
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.page-create .create-col--catalog .items-bag {
  grid-column: 1;
  width: min(var(--items-catalog-width), 100%);
  justify-self: stretch;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.page-create .create-col--catalog .items-bag__stage {
  min-height: 0;
}

.page-create .create-col--catalog .items-bag__stage > .bpb-bg {
  /* Side gutter so sprite overhang, shadows, and the appear overshoot draw
     instead of being cut by the scroller (overflow-y: auto forces x to clip).
     The grid subtracts this padding when sizing cells. */
  box-sizing: border-box;
  padding-inline: clamp(0.5rem, 0.75vw, 1rem);
  overflow-x: hidden;
  overflow-y: auto;
}

.page-create .create-col--catalog .items-filters {
  grid-column: 2;
  justify-self: start;
  align-self: stretch;
  position: sticky;
  top: var(--items-filters-top, 0.75rem);
}

/*
 * Filter | Build rail: same bottom cut-off (above Sellbox), tabs fixed,
 * panels scroll with item-picker (bpb-bg) scrollbar chrome.
 */
.page-create .create-col--catalog .items-filters.create-rail {
  display: flex;
  flex-direction: column;
  align-self: start;
  top: 0;
  /* End above the chest — same floor for Filter and Build */
  height: calc(100% - var(--create-sellbin-clearance));
  max-height: calc(100% - var(--create-sellbin-clearance));
  overflow: hidden;
  box-sizing: border-box;
  scrollbar-width: auto;
  scrollbar-color: auto;
}

.page-create .create-col--catalog .items-filters.create-rail::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-tabs,
.page-create .create-col--catalog .items-filters.create-rail .cr-rule {
  flex-shrink: 0;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  --bpb-bg-scroll-thumb: #eac914;
  --bpb-bg-scroll-track: #816230;
  --bpb-bg-scroll-frame: #472a24;
  scrollbar-width: auto;
  scrollbar-color: auto;
}

/* Filter fits — no scrollbar lane */
.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters {
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

/* Create-only filter order: keep Search near the top while Debuffs remains last. */
.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters {
  display: flex;
  flex-direction: column;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__search-row {
  display: contents;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__head {
  order: 0;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__search {
  order: 1;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__grouping {
  order: 2;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__classes {
  order: 3;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__rarities {
  order: 4;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__types {
  order: 5;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__lower {
  order: 6;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters .il-filter__debuffs {
  order: 7;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Build is taller — show item-picker scrollbar when needed */
.page-create .create-col--catalog .items-filters.create-rail .cr-panel--build {
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  /*
   * Extra scroll room past Essentials so Needs/Wants/Good-to-have can sit
   * above the fixed Sell chest (avoids accidental trash drops).
   */
  padding-bottom: max(10rem, var(--create-sellbin-clearance));
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--build::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--build::-webkit-scrollbar-track {
  border: 3px solid var(--bpb-bg-scroll-frame);
  border-radius: 16px;
  background: var(--bpb-bg-scroll-track);
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--build::-webkit-scrollbar-thumb {
  border: 2px solid var(--bpb-bg-scroll-frame);
  border-radius: 20px;
  background-color: var(--bpb-bg-scroll-thumb);
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters,
.page-create .create-col--catalog .items-filters.create-rail .cr-panel--build {
  padding-top: 0.35rem;
  /* Horizontal pad lives on .items-filters — extra here clipped buff icons */
  padding-left: 0;
  padding-right: 0;
}

.page-create .create-col--catalog .items-filters.create-rail .cr-panel--filters {
  padding-bottom: 0.5rem;
}

/* Create essentials — reuse build-info cells; selection + assign chrome */
.page-create .build-info__ess {
  margin-bottom: 0.65rem;
}

.page-create .build-info__ess .cr-hint {
  margin-bottom: 0.4rem;
}

.page-create .build-info__ess-grid > .build-info__tier {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  cursor: var(--bpb-cursor-default);
  width: 100%;
}

.page-create .build-info__ess-grid > .build-info__tier:focus,
.page-create .build-info__ess-grid > .build-info__tier:focus-visible {
  outline: none;
}

.page-create .build-info__ess-grid > .build-info__tier.is-armed {
  cursor: var(--bpb-cursor-pointer);
}

/* Outline + tint on the Patch3 shade (::before), not the parchment cell rect */
.page-create .build-info__ess-grid > .build-info__tier.is-drop-valid {
  outline: 2px dashed color-mix(in srgb, var(--build-cream, #ffecdc) 45%, #eac914);
  outline-offset: -0.4rem;
  background: transparent;
}

.page-create .build-info__ess-grid > .build-info__tier.is-drop-valid::before {
  background: color-mix(in srgb, var(--build-shade) 70%, #eac914 18%);
}

.page-create .build-info__ess-grid > .build-info__tier.is-drop-hover {
  outline: 2px solid color-mix(in srgb, var(--build-cream, #ffecdc) 55%, #eac914);
  outline-offset: -0.4rem;
  background: transparent;
}

.page-create .build-info__ess-grid > .build-info__tier.is-drop-hover::before {
  background: color-mix(in srgb, var(--build-shade) 55%, #eac914 28%);
}

.page-create .build-info__ess-grid > .build-info__tier.is-drop-reject {
  outline: 2px solid color-mix(in srgb, #a33 70%, var(--build-ink, #3c261d));
  outline-offset: -0.4rem;
  background: transparent;
}

.page-create .build-info__ess-grid > .build-info__tier.is-drop-reject::before {
  background: color-mix(in srgb, var(--build-shade) 75%, #a33 20%);
}

.page-create .build-info__list-item {
  cursor: var(--bpb-cursor-pointer);
  border-radius: 0.25rem;
}

/* Bigger than build-page info rail so create essentials read clearly */
.page-create .build-info__list-item img {
  width: 4rem;
  height: 4rem;
}

.page-create .build-info__tier--wide .build-info__list-item img {
  width: 3.5rem;
  height: 3.5rem;
}

.page-create .build-info__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.35rem;
}

.page-create .build-info__tier--wide .build-info__list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.create-status {
  margin: 2rem auto;
  text-align: center;
  font-family: var(--bpb-font-body);
}

/* —— Board (same mount + chrome as build viewer) —— */
.create-board {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  container-type: inline-size;
  container-name: create-board;
}

/* Confirm before clearing attached run history — stage (bag) only */
.create-history-lock {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  box-sizing: border-box;
  pointer-events: none;
  /* Soft dissolve at stage edges (no hard cut box) */
  -webkit-mask-image: radial-gradient(
    ellipse 92% 88% at 50% 48%,
    #000 42%,
    rgba(0, 0, 0, 0.85) 62%,
    rgba(0, 0, 0, 0.35) 78%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 92% 88% at 50% 48%,
    #000 42%,
    rgba(0, 0, 0, 0.85) 62%,
    rgba(0, 0, 0, 0.35) 78%,
    transparent 100%
  );
}

.create-history-lock[hidden] {
  display: none !important;
}

.create-history-lock__backdrop {
  position: absolute;
  inset: -8%;
  cursor: var(--bpb-cursor-pointer);
  pointer-events: auto;
  background:
    radial-gradient(
      ellipse 78% 72% at 50% 48%,
      color-mix(in srgb, #1a100c 72%, transparent) 0%,
      color-mix(in srgb, #2a160f 48%, transparent) 45%,
      color-mix(in srgb, #3c261d 18%, transparent) 72%,
      transparent 100%
    );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.create-history-lock__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 21rem);
  padding: 1.15rem 1.25rem 1.05rem;
  box-sizing: border-box;
  pointer-events: auto;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--bpb-label-fill, #fffaf0);
  --build-shade: rgba(14, 15, 16, 0.42);
}

.create-history-lock__panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  box-sizing: border-box;
  background: var(--build-shade);
  pointer-events: none;
  -webkit-mask-box-image: url('../../../assets/icons/filters/Patch3.png') 8 7 9 8 fill;
  mask-border-source: url('../../../assets/icons/filters/Patch3.png');
  mask-border-slice: 8 7 9 8 fill;
  mask-border-width: 8px 7px 9px 8px;
}

.create-history-lock__title {
  margin: 0 0 0.55rem;
  font-family: var(--bpb-font-display);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.create-history-lock__body {
  margin: 0 0 1rem;
  font-family: var(--bpb-font-body);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--create-cream, #ffecdc);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.create-history-lock__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.create-history-lock__btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.35rem 0.9rem 0.3rem;
  border: 2px solid var(--il-ink, #3c261d);
  border-radius: 0.35rem;
  font-family: var(--bpb-font-body);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--il-cream, #ffecdc);
  cursor: var(--bpb-cursor-pointer);
  background: color-mix(in srgb, var(--il-ink, #3c261d) 38%, #8a6a4a);
  transition: filter 0.12s ease, background 0.12s ease;
}

.create-history-lock__btn:hover {
  filter: brightness(1.1);
}

.create-history-lock__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--il-gold, #eac914) 80%, transparent);
  outline-offset: 2px;
}

.create-history-lock__btn--confirm {
  font-family: var(--bpb-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0.08em var(--il-ink, #3c261d);
  paint-order: stroke fill;
  text-shadow: var(--il-ui-ring, 0 1px 0 rgba(0, 0, 0, 0.35));
  border-color: color-mix(in srgb, var(--il-gold, #eac914) 40%, var(--il-ink, #3c261d));
  background: color-mix(in srgb, var(--il-ink, #3c261d) 32%, #9a7040);
}

/* Locked board cue — gold ring on the bag only (no dark veil). */
.create-board.is-history-locked .create-board__bag {
  outline: 3px solid var(--il-gold, #eac914);
  outline-offset: 5px;
  border-radius: 0.2rem;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--il-ink, #3c261d) 55%, transparent),
    0 0 0 8px color-mix(in srgb, var(--il-gold, #eac914) 35%, transparent);
}

.create-board.is-history-locked .create-history-lock {
  z-index: 60;
}

/* Unlock = open-lock icon; same toggle chrome as layer buttons */
.create-board__unlock.create-board__toggle {
  margin: 0;
}

.create-board__unlock[hidden] {
  display: none !important;
}

.create-board__unlock-icon {
  width: 1.85rem;
  height: 1.85rem;
  display: block;
  flex: 0 0 auto;
  transition: filter 0.12s ease;
}

.create-board__unlock:hover .create-board__unlock-icon {
  filter: brightness(1.3);
}

/* Inventory PotentialSpace grid — only while dragging a bag (Inventory.gd) */
.page-create .create-board__bag.build-bag .bpb-bg__lines {
  display: none;
  opacity: 0.35;
}

.page-create .is-dragging-bag .create-board__bag.build-bag .bpb-bg__lines {
  display: block;
}

.create-board.is-awaiting-build .create-board__toolbar {
  /* Keep the toolbar row reserved before the first item is placed. */
  visibility: visible;
  pointer-events: auto;
}

.create-board.is-awaiting-build .create-board__toolbar-center > :not(.create-board__toggle--default-bag) {
  visibility: hidden;
  pointer-events: none;
}

/* Reserve the same toolbar width/height before the Play and Export controls
   become available, so revealing them cannot reflow the board. */
.create-board.is-awaiting-build .create-board__play[hidden],
.create-board.is-awaiting-build .create-board__export[hidden] {
  display: inline-flex !important;
}

.create-board__toolbar {
  /* This reserved row keeps controls above the board without moving it when
     the first placed item reveals the toolbar. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.45rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.15rem 0.15rem 0.35rem;
  margin-bottom: 0.15rem;
  overflow: visible;
}

.create-board__toolbar-spacer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.create-board__toolbar-center {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  justify-self: start;
  /* Let dice-style sparkles / glow paint outside the orb */
  overflow: visible;
}

/* Create controls help: the same compact "i" language used by the Build tab,
   with a pinned panel so the user can move from the icon to the board. */
.create-board__controls-help {
  position: relative;
  z-index: 30;
  display: inline-flex;
  align-items: center;
}

.create-board__controls-help-trigger {
  flex: 0 0 auto;
  width: 1.72rem;
  height: 1.72rem;
  font-size: 1rem;
}

.create-board__controls-help.is-open .create-board__controls-help-trigger {
  color: var(--il-ink, #3c261d);
  background: var(--il-gold, #eac914);
  border-color: var(--il-ink, #3c261d);
}

.create-board__controls-help-panel {
  --create-help-ink: var(--il-ink, #3c261d);
  --create-help-cream: var(--il-cream, #ffecdc);
  position: fixed;
  top: 0;
  left: 0;
  width: min(26rem, calc(100vw - 1rem));
  max-height: min(70vh, 34rem);
  box-sizing: border-box;
  overflow: auto;
  padding: 0.8rem 0.9rem 0.7rem;
  border: 2px solid var(--create-help-ink);
  border-radius: 0.25rem;
  background:
    linear-gradient(rgba(255, 236, 220, 0.1), rgba(255, 236, 220, 0.1)),
    #9b7654;
  box-shadow: 0 0.3rem 0 rgba(45, 27, 17, 0.35);
  color: var(--create-help-cream);
  transform: translateY(-0.25rem);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}

.create-board__controls-help.is-open .create-board__controls-help-panel {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.create-controls-help__intro {
  margin-bottom: 0.45rem;
  color: var(--create-help-cream);
  font-family: var(--bpb-font-display);
  font-size: 1.35rem;
  line-height: 1.05;
  -webkit-text-stroke: 0.045em var(--create-help-ink);
  paint-order: stroke fill;
  text-shadow: 0.04em 0.04em 0 var(--create-help-ink);
}

.create-controls-help__group + .create-controls-help__group {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(60, 38, 29, 0.45);
}

.create-controls-help__heading {
  margin: 0 0 0.2rem;
  color: #f5d96a;
  font-family: var(--bpb-font-body);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.create-controls-help__list {
  display: grid;
  gap: 0.22rem;
  margin: 0;
}

.create-controls-help__row {
  display: grid;
  grid-template-columns: minmax(7.6rem, auto) minmax(0, 1fr);
  gap: 0.45rem;
  align-items: baseline;
  font-family: var(--bpb-font-body);
  font-size: 0.82rem;
  line-height: 1.18;
}

.create-controls-help__row dt,
.create-controls-help__row dd {
  margin: 0;
}

.create-controls-help__row dt {
  color: var(--create-help-cream);
  font-weight: 700;
}

.create-controls-help__row dd {
  color: #f6e4d0;
}

.create-controls-help__row kbd {
  display: inline-block;
  margin-right: 0.18rem;
  padding: 0.08rem 0.28rem;
  border: 1px solid rgba(60, 38, 29, 0.7);
  border-radius: 0.18rem;
  color: var(--create-help-ink);
  background: rgba(255, 236, 220, 0.72);
  font-family: var(--bpb-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.create-controls-help__hint {
  margin-top: 0.7rem;
  color: #f5d96a;
  font-family: var(--bpb-font-body);
  font-size: 0.74rem;
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .create-board__controls-help-panel {
    transition: none;
  }
}

@media (max-width: 560px) {
  .create-board__controls-help-panel {
    width: calc(100vw - 0.75rem);
    max-height: min(72vh, 30rem);
  }

  .create-controls-help__row {
    grid-template-columns: minmax(6.9rem, auto) minmax(0, 1fr);
    font-size: 0.78rem;
  }
}

.create-board__play[hidden] {
  display: none !important;
}

.create-board__export[hidden] {
  display: none !important;
}

.create-board__export {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 5;
}

.create-board__export-icon {
  display: block;
  width: 1.85rem;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__toggle--export:hover .create-board__export-icon {
  filter: brightness(1.15) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__export-menu {
  --il-ink: #3c261d;
  --il-sticker: #f7efc2;
  --il-gold: #eac914;
  --il-ui-stroke: 0.1em;
  --il-ui-track: -0.03em;
  --il-ui-ring:
    0.1em 0 0 var(--il-ink),
    0.092em 0.038em 0 var(--il-ink),
    0.071em 0.071em 0 var(--il-ink),
    0.038em 0.092em 0 var(--il-ink),
    0 0.1em 0 var(--il-ink),
    -0.038em 0.092em 0 var(--il-ink),
    -0.071em 0.071em 0 var(--il-ink),
    -0.092em 0.038em 0 var(--il-ink),
    -0.1em 0 0 var(--il-ink),
    -0.092em -0.038em 0 var(--il-ink),
    -0.071em -0.071em 0 var(--il-ink),
    -0.038em -0.092em 0 var(--il-ink),
    0 -0.1em 0 var(--il-ink),
    0.038em -0.092em 0 var(--il-ink),
    0.071em -0.071em 0 var(--il-ink),
    0.092em -0.038em 0 var(--il-ink);
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%) translateY(-0.2rem);
  display: flex;
  flex-direction: column;
  width: min(12rem, calc(100vw - 1rem));
  min-width: min(12rem, calc(100vw - 1rem));
  padding: 0.2rem 0;
  border: 2px solid var(--il-ink);
  border-radius: 0;
  background: #d4b48a;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0.12s;
  z-index: 20;
}

.create-board__export:hover .create-board__export-menu,
.create-board__export:focus-within .create-board__export-menu,
.create-board__export.is-open .create-board__export-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.create-board__export-opt {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.38rem 0.7rem;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: var(--bpb-cursor-pointer);
  font-family: var(--bpb-font-body);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: var(--il-ui-track);
  line-height: 1.15;
  color: var(--il-sticker);
  background: transparent;
  text-align: left;
  white-space: nowrap;
  -webkit-text-stroke: var(--il-ui-stroke) var(--il-ink);
  paint-order: stroke fill;
  text-shadow: var(--il-ui-ring);
}

.create-board__export-opt + .create-board__export-opt {
  border-top: 1px solid rgba(42, 26, 16, 0.22);
}

.create-board__export-opt:hover,
.create-board__export-opt:focus-visible {
  border-color: var(--il-gold);
  background: rgba(234, 201, 20, 0.12);
  outline: none;
}

.create-board__export-opt--animation {
  border-top: 1px solid rgba(42, 26, 16, 0.22);
  color: #dff3ff;
}

.create-board__export-opt:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
  .create-board__export-menu {
    transition: none;
  }
}

.create-board__toolbar-center .create-board__play {
  margin-inline: 0.15rem;
  overflow: visible;
}

.create-board__modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-right: 0.15rem;
}

.create-board__economy {
  display: inline-flex;
  /* Gold, stamina, and its status are one readout. Keep it intact rather
     than letting the status fall below the first two values. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  justify-self: end;
  min-width: 0;
}

.create-board__econ {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--bpb-font-body);
  color: var(--bpb-ink, #3c261d);
  line-height: 1;
  user-select: none;
  overflow: visible;
}

.create-board__econ-num {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  padding-inline: 0.22em 0.08em;
  overflow: visible;
}

.create-board__econ-sep {
  margin: 0 0.12em;
  opacity: 0.85;
}

.create-board__econ-icon {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__econ-icon--usage {
  width: 2.1rem;
  height: 2.1rem;
}

.create-board__econ-label {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--stam-tier-color, rgb(170, 255, 117));
  white-space: nowrap;
}

.create-board__econ--stam-pool.is-over .create-board__econ-num {
  color: #ffb4a0;
}

/* Keep board controls and run economy on one row at narrow widths.  Controls
 * stop reserving the visual centre and make room for the status readout. */
@media (max-width: 720px) {
  .create-board__toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    column-gap: 0.3rem;
    row-gap: 0;
  }

  .create-board__toolbar-spacer {
    display: none;
  }

  .create-board.is-history-locked .create-board__toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .create-board.is-history-locked .create-board__toolbar-spacer {
    display: flex;
    width: auto;
  }

  .create-board__toolbar-center {
    flex-wrap: nowrap;
    justify-self: start;
    gap: 0.22rem;
  }

  .create-board__toolbar .build-round__toggles,
  .create-board__modes {
    flex-wrap: nowrap;
    gap: 0.18rem;
    margin-right: 0;
  }

  .create-board__economy {
    flex-wrap: nowrap;
    justify-self: end;
    justify-content: flex-end;
    gap: 0.25rem;
  }

  .create-board__econ {
    gap: 0.12rem;
  }

  .create-board__econ-num {
    font-size: 1.12rem;
    padding-inline: 0.1em 0.03em;
  }

  .create-board__econ-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .create-board__econ-icon--usage {
    width: 1.6rem;
    height: 1.6rem;
  }

  .create-board__econ-label {
    font-size: 0.96rem;
  }

  .create-board__toolbar .build-round__toggle {
    padding: 0.04rem;
  }

  .create-board__toolbar .build-round__toggle img {
    width: 1.75rem;
  }

  .create-board__toolbar .build-round__toggle--bags img {
    width: 1.5rem;
  }

  .create-board__toggle--clear {
    margin-left: 0.08rem;
  }

  .create-board__toggle--clear img {
    width: 1.45rem;
  }

  .create-board__toolbar .bpb-premium-cta--orb.bpb-premium-cta--toolbar {
    --bpb-premium-h: 1.8rem;
    --bpb-premium-w: 1.8rem;
  }
}

/* The board can be narrow even on a wide viewport (for example, alongside
 * the catalog rail), so retain the same compact layout based on its container. */
@container create-board (max-width: 36rem) {
  .create-board__toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    column-gap: 0.3rem;
    row-gap: 0;
  }

  .create-board__toolbar-spacer {
    display: none;
  }

  .create-board.is-history-locked .create-board__toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .create-board.is-history-locked .create-board__toolbar-spacer {
    display: flex;
    width: auto;
  }

  .create-board__toolbar-center,
  .create-board__toolbar .build-round__toggles,
  .create-board__modes,
  .create-board__economy {
    flex-wrap: nowrap;
  }

  .create-board__toolbar-center {
    justify-self: start;
    gap: 0.22rem;
  }

  .create-board__toolbar .build-round__toggles,
  .create-board__modes {
    gap: 0.18rem;
    margin-right: 0;
  }

  .create-board__economy {
    justify-self: end;
    justify-content: flex-end;
    gap: 0.25rem;
  }

  .create-board__econ {
    gap: 0.12rem;
  }

  .create-board__econ-num {
    font-size: 1.12rem;
    padding-inline: 0.1em 0.03em;
  }

  .create-board__econ-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .create-board__econ-icon--usage {
    width: 1.6rem;
    height: 1.6rem;
  }

  .create-board__econ-label {
    font-size: 0.96rem;
  }

  .create-board__toolbar .build-round__toggle {
    padding: 0.04rem;
  }

  .create-board__toolbar .build-round__toggle img {
    width: 1.75rem;
  }

  .create-board__toolbar .build-round__toggle--bags img {
    width: 1.5rem;
  }

  .create-board__toggle--clear {
    margin-left: 0.08rem;
  }

  .create-board__toggle--clear img {
    width: 1.45rem;
  }

  .create-board__toolbar .bpb-premium-cta--orb.bpb-premium-cta--toolbar {
    --bpb-premium-h: 1.8rem;
    --bpb-premium-w: 1.8rem;
  }
}

/* Game setEditMode(false) — opposite layer ~0.6 alpha, shadow ~0.3.
 * Hit pads use pointer-events:auto — must kill * children or dimmed
 * items still receive hover/tooltips. */
.create-board .bpb-bg__item.is-layer-dim {
  opacity: 0.6;
  pointer-events: none !important;
}

.create-board .bpb-bg__item.is-layer-dim *,
.create-board .bpb-bg__item.is-layer-dim .bpb-bg__hit,
.create-board .bpb-bg__item.is-layer-dim .bpb-bg__hit-pad {
  pointer-events: none !important;
}

.create-board .bpb-bg__item.is-layer-dim .bpb-bg__sprite--shadow,
.create-board .bpb-bg__item.is-layer-dim .bpb-bg__spin--shadow {
  opacity: 0.3;
}

/* Layer toolbar — reuse build-round toggle chrome */
.create-board__toolbar .build-round__toggles {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.create-board__toggle--clear {
  margin-left: 0.35rem;
}

.create-board__toggle--clear img {
  width: 1.75rem;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__toggle--clear:hover img {
  filter: brightness(1.2) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__toggle--default-bag {
  margin-left: 0.08rem;
}

.create-board__default-bag-icon {
  position: relative;
  display: block;
  width: 1.9rem;
  height: 1.9rem;
}

.create-board__default-bag-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
  transition: filter 0.12s ease;
}

.create-board__default-bag-badge {
  position: absolute;
  right: -0.24rem;
  bottom: -0.16rem;
  display: grid;
  place-items: center;
  width: 0.82rem;
  height: 0.82rem;
  box-sizing: border-box;
  border: 2px solid var(--il-ink, #3c261d);
  border-radius: 50%;
  color: var(--il-ink, #3c261d);
  background: var(--il-gold, #eac914);
  font-family: var(--bpb-font-body, sans-serif);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
}

.create-board__toggle--default-bag:hover .create-board__default-bag-icon img {
  filter: brightness(1.2) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

/* Fabric ≈ game TileMap modulate 0.5 */
.page-create .create-board .bpb-bg__fabric .bpb-bg__cell--bag {
  opacity: 0.5;
}

.create-board__stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

/* Ring stats use the Submit info-button treatment in a screen-space overlay. */
.page-create .bpb-ring-config {
  position: absolute;
  top: 0.08em;
  right: 0.08em;
  z-index: 8;
  display: inline-flex;
  pointer-events: auto;
  filter: drop-shadow(0 1px 1px rgba(28, 13, 6, 0.65));
}

.page-create .create-board.is-history-locked .bpb-ring-config {
  display: none;
}

.bpb-ring-editor {
  --il-ink: #3c261d;
  --il-cream: #ffecdc;
  --il-gold: #eac914;
  position: fixed;
  z-index: 1000;
  width: min(21rem, calc(100vw - 1rem));
  padding: 0.8rem;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--il-cream) 35%, var(--il-ink));
  border-radius: var(--bpb-radius-panel, 0.45rem);
  background:
    linear-gradient(180deg, rgba(42, 22, 16, 0.96), rgba(24, 14, 10, 0.98)),
    url('../../../assets/theme/backgrounds/bg-parchment-panel.png');
  background-size: cover;
  color: var(--il-cream);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), var(--bpb-shadow-paper, 0 4px 14px rgba(40, 24, 12, 0.35));
}

.bpb-ring-editor__head,
.bpb-ring-editor__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.bpb-ring-editor h2 {
  margin: 0;
  font: 700 1.1rem/1.2 var(--bpb-font-body, sans-serif);
}

.bpb-ring-editor__close,
.bpb-ring-editor__cancel,
.bpb-ring-editor__save {
  border: 1px solid rgba(255, 236, 220, 0.45);
  border-radius: 0.3rem;
  padding: 0.35rem 0.6rem;
  background: rgba(55, 36, 22, 0.45);
  color: var(--il-cream);
  font: 600 0.9rem/1.1 var(--bpb-font-body, sans-serif);
  cursor: var(--bpb-cursor-pointer);
}

.bpb-ring-editor__close {
  border: 0;
  padding: 0.1rem 0.35rem;
  font-size: 1.35rem;
}

.bpb-ring-editor__save {
  border-color: var(--il-gold);
  background: color-mix(in srgb, var(--il-gold) 25%, var(--il-ink));
}

.bpb-ring-editor__close:hover,
.bpb-ring-editor__cancel:hover,
.bpb-ring-editor__save:hover,
.bpb-ring-editor__close:focus-visible,
.bpb-ring-editor__cancel:focus-visible,
.bpb-ring-editor__save:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--il-gold) 80%, transparent);
  outline-offset: 2px;
}

.bpb-ring-editor__hint {
  margin: 0.35rem 0 0.7rem;
  color: color-mix(in srgb, var(--il-cream) 80%, transparent);
  font-size: 0.82rem;
}

.bpb-ring-editor__rows {
  display: grid;
  gap: 0.55rem;
}

.bpb-ring-editor__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.bpb-ring-editor__row-label {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  opacity: 0.85;
}

.bpb-ring-editor select {
  min-width: 0;
  padding: 0.35rem;
  border: 1px solid rgba(255, 236, 220, 0.45);
  border-radius: 0.25rem;
  background: rgba(55, 36, 22, 0.7);
  color: var(--il-cream);
  font: 0.82rem var(--bpb-font-body, sans-serif);
}

.bpb-ring-editor__amount {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--il-gold) 82%, var(--il-cream));
  font-size: 0.78rem;
}

.bpb-ring-editor__actions {
  justify-content: flex-end;
  margin-top: 0.8rem;
}

/* Attached run history — same scrubber chrome as build page (previewMode) */
.create-board__round {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
}

.create-board__round[hidden] {
  display: none !important;
}

.create-board.is-history-attached .create-board__round {
  margin-bottom: 0.25rem;
}

.create-board__stage.is-import-hover::after {
  content: '';
  position: absolute;
  inset: 0.35rem;
  z-index: 40;
  pointer-events: none;
  border: 2px dashed color-mix(in srgb, var(--bpb-ink, #3c261d) 55%, transparent);
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--bpb-parchment, #e8d4b8) 55%, transparent);
}

/* Empty-board onboarding — fixed over .create-board (body-mounted).
 * Geometry (top/left/width/height) + panel absolute center set in board-onboard.js. */
.create-onboard {
  position: fixed;
  z-index: 200000;
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: transparent;
  pointer-events: auto;
  overflow: visible;
}

.create-onboard[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.create-onboard.is-place-back .create-onboard__grid,
.create-onboard.is-place-back .create-onboard__actions,
.create-onboard.is-place-back .create-onboard__back {
  display: none !important;
}

.create-onboard.is-place-back .create-onboard__head {
  margin-bottom: 0;
}

.create-onboard__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  flex: 0 0 auto;
  width: max-content;
  max-width: min(100%, 38rem);
  margin: 0;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.4rem;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  box-sizing: border-box;
}

.create-onboard__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.15rem;
}

.create-onboard__back {
  appearance: none;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url('../../../assets/icons/sim/log/NextOptionArrow.png');
  background-size: 1.45rem 1.45rem;
  background-position: center;
  background-repeat: no-repeat;
  cursor: var(--bpb-cursor-pointer);
  transform: scaleX(-1);
  filter: drop-shadow(0 1px 0 rgba(10, 7, 5, 0.55));
}

.create-onboard__back:hover {
  filter: brightness(1.15) drop-shadow(0 1px 0 rgba(10, 7, 5, 0.55));
}

.create-onboard__back:focus-visible {
  outline: 2px solid #eac914;
  outline-offset: 3px;
}

.create-onboard__back[hidden] {
  display: none;
}

.create-onboard__title {
  margin: 0;
  font-family: var(--bpb-font-display);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
  width: auto;
  padding-inline: 0.28em;
  box-sizing: border-box;
  text-align: center;
  overflow: visible;
}

.create-onboard__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.65rem;
  justify-content: center;
  align-items: center;
  margin: 0 0 1rem;
  width: 100%;
}

.create-onboard__grid--classes {
  align-self: center;
  width: fit-content;
  max-width: min(100%, calc(4 * 5.6rem + 3 * 0.65rem));
  margin-inline: auto;
  justify-content: center;
}

.create-onboard__grid--bags {
  align-self: center;
  width: max-content;
  max-width: none;
  flex-wrap: nowrap;
  gap: 0.35rem 1.5rem;
}

.create-onboard__icon-btn--bag {
  flex: 0 0 auto;
}

/* Step visibility is toggled via inline display in board-onboard.js */

.create-onboard__icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.35rem 0.25rem;
  border: none;
  border-radius: 0.3rem;
  background: transparent;
  cursor: var(--bpb-cursor-pointer);
  color: var(--bpb-ink, #3c261d);
  font-family: var(--bpb-font-body);
}

.create-onboard__icon-btn img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
}

.create-onboard__icon-btn--bag img {
  width: 11rem;
  height: 11rem;
}

.create-onboard__icon-btn:hover {
  background: transparent;
  filter: brightness(1.12);
}

.create-onboard__icon-btn:focus-visible {
  outline: 2px solid var(--bpb-ink, #3c261d);
  outline-offset: 2px;
}

.create-onboard__icon-label {
  font-size: 0.72rem;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-onboard__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0.15rem;
}

.create-onboard__or {
  margin: 0.15rem 0 0.2rem;
  text-align: center;
  font-family: var(--bpb-font-body);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}

.create-onboard__upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.create-onboard__upload-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 0;
}

.create-onboard__btn {
  margin: 0;
  padding: 0.4rem 0.75rem;
  border: 2px solid var(--bpb-ink, #3c261d);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--bpb-ink, #3c261d);
  font-family: var(--bpb-font-body);
  font-size: 0.9rem;
  cursor: var(--bpb-cursor-pointer);
}

.create-onboard__btn:hover {
  filter: brightness(1.08);
}

.create-onboard__btn--dashed {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--bpb-ink, #3c261d) 55%, transparent);
}

/* Full width of pick-class block */
.create-onboard__btn--history {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem 0.5rem;
  text-align: center;
  line-height: 1.2;
}

.create-onboard__history-label {
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 10, 5, 0.75);
}

.create-onboard__history-path {
  display: block;
  margin: 0;
  max-width: 100%;
  padding: 0.1em 0.2em;
  overflow-wrap: anywhere;
  font-size: 0.68rem;
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 10, 5, 0.75);
  background: transparent;
}

.create-onboard__path-copy {
  align-self: center;
  margin: 0;
  padding: 0.15rem 0.5rem;
  border: none;
  border-radius: 0.2rem;
  background: transparent;
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 10, 5, 0.75);
  font-family: var(--bpb-font-body);
  font-size: 0.72rem;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  cursor: var(--bpb-cursor-pointer);
  white-space: nowrap;
}

.create-onboard__path-copy:hover {
  color: #fff;
  filter: brightness(1.15);
}

.create-onboard__path-copy:focus-visible {
  outline: 2px solid var(--bpb-ink, #3c261d);
  outline-offset: 2px;
}

.create-onboard__btn:focus-visible {
  outline: 2px solid var(--bpb-ink, #3c261d);
  outline-offset: 2px;
}

.create-import-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 1200;
  transform: translateX(-50%);
  max-width: min(92vw, 26rem);
  padding: 0.65rem 1rem;
  border-radius: 0.3rem;
  background: color-mix(in srgb, #2a1a12 92%, #000);
  color: #ffecdc;
  font-family: var(--bpb-font-body);
  font-size: 0.95rem;
  line-height: 1.3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.create-import-toast[hidden] {
  display: none !important;
}

/* History overlay styles: history-panel.css (linked from create/index.html).
 * z-index 200010 sits above onboard (200000).
 * Geometry: board minus park (toolbar + stage); park stays uncovered. */

.create-board.is-history-open .create-board__toolbar {
  visibility: hidden;
  pointer-events: none;
}

.create-board__bag.build-bag {
  width: 100%;
}

/* Exact 9×7 board — never scroll the inventory grid (catalog bag scrolls separately) */
.page-create .create-board__bag .bpb-bg {
  overflow: visible;
  height: auto;
  max-height: none;
}

.create-board__ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: none; /* replaced by inv-preview tiles */
}

/* Inventory hover tiles — inside .bpb-bg__items, above fabric (5000), under gear (≥10000) */
.create-board__inv-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7500;
}

.create-board__inv-preview[hidden] {
  display: none;
}

.create-board__inv-tile {
  position: absolute;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  opacity: 0.95;
  pointer-events: none;
}

/* Match .bpb-bg__cell--bag / create fabric TileMap modulate */
.create-board__inv-tile.is-potential {
  opacity: 0.5;
}

.create-board__affect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.create-board__affect[hidden] {
  display: none;
}

.create-board__affect-tile {
  position: absolute;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
}

/* Game BagBorder: the extracted border texture is a child of the bag Icon,
   tinted by the bag scene and brightened by BagBorder.gd while hovered. */
.page-create .bpb-bg__bag-border {
  position: absolute;
  inset: -0.02em;
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: 0;
  background-color: var(--bpb-bag-border-color, #72bc61);
  -webkit-mask-image: var(--bpb-bag-border-image);
  mask-image: var(--bpb-bag-border-image);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Fabric is a shared z=5000 seam layer. Raise only a compatible bag root so
   its BagBorder can sit above FilledSlot while remaining below gear sprites. */
.page-create .bpb-bg--placed .bpb-bg__item--bag.is-drag-synergy {
  z-index: 6000 !important;
}

.page-create .bpb-bg__item--bag.is-drag-synergy .bpb-bg__bag-border {
  opacity: 1;
  filter: brightness(1.3);
}

.page-create .bpb-bg__item--bag.is-drag-synergy-hover .bpb-bg__bag-border {
  filter: brightness(2.5);
}

.page-create .bpb-bg--placed:not(.bpb-bg--itemiary) .bpb-bg__item--bag.is-drag-synergy .bpb-bg__bag-slots {
  display: block;
}

.page-create .bpb-bg__item--bag.is-drag-synergy .bpb-bg__bag-slots .bpb-bg__cell--bag,
.page-create .bpb-bg__fabric .bpb-bg__cell--bag.is-drag-synergy {
  outline: none;
  filter: none;
}

.page-create .bpb-bg__item--bag.is-drag-synergy-hover .bpb-bg__bag-slots .bpb-bg__cell--bag,
.page-create .bpb-bg__fabric .bpb-bg__cell--bag.is-drag-synergy-hover {
  filter: none;
}

.create-board__ghost-cell {
  display: none;
}

.create-board__ghost.is-valid .create-board__ghost-cell,
.create-board__ghost.is-invalid .create-board__ghost-cell {
  display: none;
}

/* Item sprite that follows the pointer while dragging (shop lift) */
.create-board__cursor {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  left: 0;
  top: 0;
  /* Position via translate3d in JS — avoids layout thrash on left/top */
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  line-height: 0;
  overflow: visible;
  /* Silhouette shadow img — no live drop-shadow filter while moving */
  filter: none;
  will-change: transform;
  contain: layout style;
  transition: none;
}

.create-board__cursor.is-sell-hover {
  contain: none;
}

.create-board__cursor[hidden] {
  display: none;
}

.create-board__cursor-shadow {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
  /* Board .bpb-bg__sprite--shadow */
  filter: brightness(0);
}

.create-board__cursor.is-bag .create-board__cursor-shadow {
  opacity: 0.45;
  filter: brightness(0) blur(0.75px);
}

.create-board__cursor-sprite {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.create-board__cursor-sprite .bpb-bg__sprite.bpb-live {
  left: 0;
  top: 0;
  translate: none;
  width: 100%;
  height: 100%;
}

.create-board__cursor-still {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Game setBright — brightness on sprite only (not the moving root filter) */
.create-board__cursor.is-held .create-board__cursor-sprite {
  filter: brightness(1.3);
}

/* Over the sell chest: red tint on the held piece, its cargo, and gems.
   The silhouette shadow keeps its normal look. */
.create-board__cursor.is-sell-hover .create-board__cursor-sprite,
.create-board__cursor.is-sell-hover .create-board__cursor-cargoes,
.create-board__cursor.is-sell-hover .create-board__cursor-gems {
  filter: sepia(1) saturate(5) hue-rotate(-52deg) brightness(0.9);
}

/* Bag.gd bagTilemap — over the Icon while dragged */
.create-board__cursor-slots {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
}

.create-board__cursor-slots[hidden] {
  display: none;
}

.create-board__cursor-slot {
  position: absolute;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Match placed fabric ≈0.5 — CanAddBag reads louder than FilledSlot at full alpha */
  opacity: 0.5;
}

.create-board__cursor-slots.is-valid .create-board__cursor-slot {
  filter: none;
}

.create-board__cursor-slots.is-invalid .create-board__cursor-slot {
  filter: none;
}

/* Items riding inside a dragged bag (over bag art + slots) */
.create-board__cursor-cargoes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.create-board__cursor-cargoes[hidden] {
  display: none;
}

.create-board__cursor-cargo {
  position: absolute;
  left: 0;
  top: 0;
  /* Isolate so bag-slot z-index cannot cover sibling cargo (armor, etc.) */
  z-index: 0;
  transform-origin: center center;
  line-height: 0;
}

.create-board__cursor-cargo-slots {
  position: absolute;
  left: 0;
  top: 0;
  /* Over this bag’s leather only (Icon/TileMap); wrap isolation keeps items above */
  z-index: 2;
  pointer-events: none;
}

.create-board__cursor-cargo > img {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.3);
  pointer-events: none;
  user-select: none;
}

/* Socketed gems on cargo items (multi / bag insides) — above sprite */
.create-board__cursor-cargo-gems {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
}

.create-board__cursor-cargo-gems .create-board__cursor-gem {
  filter: brightness(1.3);
}

/* Marquee / multi-select: show per-bag TileMap cells (normally fabric-only on board) */
.page-create .create-board .bpb-bg--placed .bpb-bg__item.is-multi-selected:not(.is-drag-source) .bpb-bg__bag-slots {
  display: block;
}

/* Socketed gems on the held host */
.create-board__cursor-gems {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.create-board__cursor-gems[hidden] {
  display: none;
}

.create-board__cursor-gem {
  position: absolute;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Item.spawnRotationSparks — lightweight CSS burst */
.create-board__rotate-sparks {
  position: fixed;
  z-index: 2100;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  --spark-color: #ffecdc;
}

.create-board__rotate-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2px 0 0 -2px;
  border-radius: 1px;
  background: var(--spark-color);
  opacity: 0.95;
  animation: create-rotate-spark 0.38s ease-out forwards;
}

.create-board__rotate-sparks.is-ccw .create-board__rotate-spark {
  animation-name: create-rotate-spark-ccw;
}

@keyframes create-rotate-spark {
  from {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--sx), var(--sy)) scale(0.2);
    opacity: 0;
  }
}

@keyframes create-rotate-spark-ccw {
  from {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(calc(var(--sx) * -1), var(--sy)) scale(0.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .create-board__rotate-sparks {
    display: none;
  }
}

/* Lifted item + rarity under (avoids faint footprint left behind) */
.page-create .bpb-bg__item.is-drag-source,
.page-create .bpb-bg__under-item.is-drag-source,
.page-create .bpb-bg__fabric .bpb-bg__cell--bag.is-drag-source,
.page-create .bpb-bg__mark--gem.is-drag-source {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* While dragging: suppress board-item hover stars (only held-item affect preview).
 * page-create is on <body>, not a descendant. */
body.page-create.is-bpb-dragging .create-board .bpb-bg__markers {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.page-create.is-bpb-dragging .create-board .bpb-bg__mark--star,
body.page-create.is-bpb-dragging .create-board .bpb-bg__mark--diamond,
body.page-create.is-bpb-dragging .create-board .bpb-bg__mark--extension,
body.page-create.is-bpb-dragging .create-board .bpb-bg__mark--tertiary,
body.page-create.is-bpb-dragging .create-board .bpb-bg__mark--lightning {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.page-create.is-bpb-dragging .create-board .bpb-bg__cell--rarity.is-lit::after {
  display: none !important;
}

/* Kill :hover while dragging — stops z/brightness flicker under the float */
body.page-create.is-bpb-dragging .create-board .bpb-bg__item {
  pointer-events: none !important;
}

body.page-create.is-bpb-dragging .create-board .bpb-bg__item:hover .bpb-bg__hit,
body.page-create.is-bpb-dragging .create-board .bpb-bg__item:focus-within .bpb-bg__hit,
body.page-create.is-bpb-dragging .create-board .bpb-bg__item--affected .bpb-bg__sprite:not(.bpb-bg__sprite--shadow) {
  filter: none !important;
}

/* Suppress item tooltips while dragging or marqueeing */
body.is-bpb-dragging .bpb-tooltip-float,
body.is-bpb-selecting .bpb-tooltip-float {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Block native webpage selection on the board (and while dragging / boxing) */
.page-create .create-board,
.page-create .create-board * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.is-bpb-dragging,
body.is-bpb-dragging *,
body.is-bpb-selecting,
body.is-bpb-selecting * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* InputBlocker.Source.ItemDragging — catalog must not steal free-follow / drops.
 * Children often set pointer-events:auto; without * + !important they still hit. */
body.page-create.is-bpb-dragging .create-col--catalog,
body.page-create.is-bpb-dragging .create-col--catalog *,
body.page-create.is-bpb-selecting .create-col--catalog,
body.page-create.is-bpb-selecting .create-col--catalog * {
  pointer-events: none !important;
}

/* SelectionBox.gd — rubber-band multi-select */
.create-board__selection-box {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--create-ink, #3c261d) 88%, #c4a574);
  background: color-mix(in srgb, var(--create-cream, #ffecdc) 28%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--create-cream, #ffecdc) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--create-ink, #3c261d) 35%, transparent);
}

.create-board__selection-box[hidden] {
  display: none;
}

/* Game setBright — selected for multi / marquee (~1.3, no stacked sprite multiply) */
.page-create .create-board .bpb-bg__item.is-multi-selected:not(.is-drag-source) {
  filter: brightness(1.3);
}

.page-create .create-board .bpb-bg__item.is-multi-selected:not(.is-drag-source) .bpb-bg__sprite:not(.bpb-bg__sprite--shadow) {
  filter: none;
}

/* Parked row under the board. Desktop docks the sell chest on its left. */
.create-board__dock {
  flex: 0 0 auto;
  width: 100%;
}

.create-board__sell-slot {
  display: none;
}

/* Soft park strip — Patch3 shade like filter / Build panel sections */
.create-board__park {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem 0.5rem;
  box-sizing: border-box;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Match essentials / filter recessed bands */
  --build-shade: rgba(14, 15, 16, 0.14);
  --park-cols: 9;
  --park-rows: 2;
  --park-gap: 0.35rem;
  --park-chip: 4.25rem;
  /* Scrollbar lane under the chips (height is reserved so the bar never crops) */
  --park-bar: 18px;
}

.create-board__park::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  box-sizing: border-box;
  background: var(--build-shade);
  pointer-events: none;
  -webkit-mask-box-image: url('../../../assets/icons/filters/Patch3.png') 8 7 9 8 fill;
  mask-border-source: url('../../../assets/icons/filters/Patch3.png');
  mask-border-slice: 8 7 9 8 fill;
  mask-border-width: 8px 7px 9px 8px;
}

.create-board__park[hidden] {
  display: none !important;
}

/* Drop chrome on the shade, not the parchment around it */
.create-board__park.is-drop-valid,
.create-board__park.is-drop-hover {
  outline: 2px dashed color-mix(in srgb, var(--create-cream, #ffecdc) 45%, #eac914);
  outline-offset: -0.4rem;
  background: transparent;
  filter: none;
  box-shadow: none;
}

.create-board__park.is-drop-valid::before {
  background: color-mix(in srgb, var(--build-shade) 70%, #eac914 18%);
}

.create-board__park.is-drop-hover {
  outline-color: color-mix(in srgb, var(--create-cream, #ffecdc) 55%, #eac914);
  outline-style: solid;
}

.create-board__park.is-drop-hover::before {
  background: color-mix(in srgb, var(--build-shade) 55%, #eac914 28%);
}

.create-board__park-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.create-board__park-label {
  margin: 0;
  font-family: var(--bpb-font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--bpb-label-fill, #fffaf0);
  text-shadow: var(--bpb-label-stroke);
}

.create-board__park-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.create-board__park-count {
  font-family: var(--bpb-font-body);
  font-size: 1rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--bpb-label-fill, #fffaf0);
  text-shadow: var(--bpb-label-stroke);
  opacity: 0.9;
  white-space: nowrap;
  padding-inline: 0.2em 0.05em;
  overflow: visible;
}

.create-board__park-clear {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.1rem;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  cursor: var(--bpb-cursor-pointer);
  line-height: 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__park-clear img {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
  pointer-events: none;
}

.create-board__park-clear:hover {
  filter: brightness(1.15) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}

.create-board__park-clear:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bpb-gold, #e8c84a) 80%, transparent);
  outline-offset: 2px;
}

.create-board__park-clear:disabled {
  opacity: 0.4;
  cursor: var(--bpb-cursor-default);
  filter: grayscale(0.25) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

.create-board__park-clear:disabled:hover {
  filter: grayscale(0.25) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

.create-board__park.is-full .create-board__park-count {
  color: color-mix(in srgb, var(--create-cream, #ffecdc) 70%, #eac914);
}

.create-board__park-tray {
  display: grid;
  grid-template-columns: repeat(var(--park-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--park-rows), var(--park-chip));
  gap: var(--park-gap);
  align-content: start;
  height: calc(
    var(--park-rows) * var(--park-chip) + (var(--park-rows) - 1) * var(--park-gap)
  );
  overflow: hidden;
  /* Signature image bar (same as Items spotlight builds strip) */
  scrollbar-width: auto;
  scrollbar-color: auto;
}

.create-board__park-tray::-webkit-scrollbar {
  width: var(--park-bar);
  height: var(--park-bar);
  background: transparent;
}

.create-board__park-tray::-webkit-scrollbar-track {
  background: none;
  border-style: solid;
  border-width: 5px 10px 6px;
  border-radius: 0;
  border-image-source: url('../../../assets/icons/scrollbar/track-horizontal.png');
  border-image-slice: 9 16 10 fill;
  border-image-width: 5px 10px 6px;
  border-image-repeat: stretch;
}

.create-board__park-tray::-webkit-scrollbar-thumb {
  min-width: 42px;
  background: none;
  border-style: solid;
  border-width: 7px 12px;
  border-radius: 0;
  border-image-source: url('../../../assets/icons/scrollbar/thumb-horizontal.png');
  border-image-slice: 11 18 fill;
  border-image-width: 7px 12px;
  border-image-repeat: stretch;
}

.create-board__park-tray::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

@supports not selector(::-webkit-scrollbar) {
  .create-board__park-tray {
    scrollbar-color: #eac914 #472a24;
  }
}

.create-board__park-empty {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 0;
  padding: 0.4rem 0.25rem;
  font-family: var(--bpb-font-body);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--bpb-label-fill, #fffaf0);
  text-shadow: var(--bpb-label-stroke);
  text-align: center;
  opacity: 0.85;
}

.create-board__park.is-drop-reject {
  outline: 2px solid color-mix(in srgb, #a33 70%, var(--create-ink, #3c261d));
  outline-offset: -0.4rem;
}

.create-board__park.is-drop-reject::before {
  background: color-mix(in srgb, var(--build-shade) 75%, #a33 20%);
}

/* Bare sprite chips — no leather/parchment cell behind */
.create-board__park-chip {
  position: relative;
  appearance: none;
  border: 0;
  cursor: var(--bpb-cursor-grab);
  padding: 0;
  width: 100%;
  height: var(--park-chip);
  max-width: var(--park-chip);
  justify-self: center;
  box-sizing: border-box;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.create-board__park-chip:hover {
  filter: brightness(1.12);
}

.create-board__park-chip:active {
  cursor: var(--bpb-cursor-grabbing);
  filter: brightness(0.96);
}

.create-board__park-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--bpb-gold, #e8c84a) 80%, transparent);
  outline-offset: 2px;
}

.create-board__park-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(30, 18, 10, 0.45));
}

.create-board__park-chip.is-park-arriving {
  opacity: 0;
}

/* Board-size cover ghosts — above bag/board (cursor is 2000) while resting/flying */
.create-board__park-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2600;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  object-fit: contain;
  user-select: none;
  transform-origin: center center;
  will-change: transform;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
  transition: transform 420ms ease-in-out, filter 180ms ease-out;
}

.create-board__park-fly.is-resting {
  /* Soft settle onto the bag before the park flight */
  transition: transform 160ms ease-out, filter 180ms ease-out;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

.create-board__park-fly.is-flying {
  transition: transform 420ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .create-board__park-fly {
    display: none !important;
    transition: none !important;
  }

  .create-board__park-chip.is-park-arriving {
    opacity: 1;
  }
}

.create-board__park-badge {
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  min-width: 1.15rem;
  padding: 0.08rem 0.28rem;
  border-radius: 0.2rem;
  font-family: var(--bpb-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--bpb-label-fill, #fffaf0);
  text-shadow: var(--bpb-label-stroke);
  background: color-mix(in srgb, var(--bpb-ink, #3d2b1f) 88%, #000);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bpb-frame, #4a3428) 80%, transparent);
  text-align: center;
  pointer-events: none;
}

/* Game Sellbox (Chestnut) — fixed bottom-right delete */
.create-sellbin {
  position: fixed;
  right: max(0.35rem, env(safe-area-inset-right, 0px));
  bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
  /* Stay above placed bag/item layers, but below the drag cursor and modal
     overlays. Large bottom-row bags can visually overhang the dock. */
  z-index: 1200 !important;
  /* Padding enlarges the JS hit rect without moving the sprite */
  padding: 1.25rem;
  width: calc(12.5rem + 2.5rem);
  box-sizing: border-box;
  pointer-events: none; /* hit-test via JS rect; avoid blocking catalog scroll */
  user-select: none;
}

.create-sellbin__chest {
  position: relative;
  width: 12.5rem;
  aspect-ratio: 478 / 360;
  /* Face the delete chest toward the board while preserving its hit box. */
  transform: scaleX(-1);
  transform-origin: center center;
  /* Headroom so an open lid isn’t clipped by the page edge */
  margin-top: 3.25rem;
  filter: drop-shadow(0 4px 10px rgba(20, 12, 8, 0.5));
  transition: filter 0.12s ease, transform 0.12s ease;
}

.create-sellbin__bottom,
.create-sellbin__top {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none;
  image-rendering: auto;
}

.create-sellbin__bottom {
  inset: 0;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  z-index: 1;
}

/* Lid sits on the mouth; hinge on the right so the left side lifts open */
.create-sellbin__top {
  bottom: 72%;
  height: auto;
  z-index: 2;
  transform-origin: 92% 95%;
  transition: transform 0.2s cubic-bezier(0.22, 0.8, 0.28, 1);
  will-change: transform;
}

.create-sellbin.is-drop-hover .create-sellbin__top {
  transform: rotate(58deg);
}

.create-sellbin.is-drop-hover .create-sellbin__chest {
  filter:
    drop-shadow(0 4px 10px rgba(20, 12, 8, 0.5))
    brightness(1.35);
}

body.page-create.is-bpb-dragging .create-sellbin {
  pointer-events: auto;
}

/* Catalog items are drag sources onto the board */
.page-create .create-col--catalog .bpb-bg__item:not(.bpb-bg__item--parked) {
  cursor: var(--bpb-cursor-grab);
}

.page-create .create-col--catalog .bpb-bg__item:not(.bpb-bg__item--parked):active {
  cursor: var(--bpb-cursor-grabbing);
}

@media (max-width: 1100px) {
  html:has(body.page-create),
  body.page-create {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .create-main {
    /* The compact Create header plus a slightly shorter catalog leaves enough
       room for the toolbar, full board, and Parked strip in one viewport. */
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.page-create .site-nav-shell {
    padding-top: 0;
  }

  body.page-create .site-nav {
    padding-top: 0.15rem;
    padding-bottom: 0;
  }

  body.page-create .site-nav__builds {
    width: min(8rem, 42vw);
    margin-bottom: -0.15rem;
  }

  .create-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .create-col--board {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    width: 100%;
    padding-bottom: 0.25rem;
    overflow: hidden;
  }

  .create-col--board .create-board {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: 0.45rem;
  }

  .create-board__stage {
    container-type: size;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
  }

  /* Board art is 9×96 by 7×96. It sits in the stage without growing it, then scales to fit. */
  .create-board__stage .create-board__bag {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 864px;
    height: 672px;
    margin: 0;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(
      min(
        calc((100cqw - 0.75rem) / 864px),
        calc((100cqh - 0.5rem) / 672px)
      )
    );
  }

  .create-col--catalog {
    flex: 0 0 24dvh;
    height: 24dvh;
    max-height: 24dvh;
    overflow: hidden;
  }

  .page-create .create-col--catalog .items-shell,
  .page-create .create-col--catalog .items-layout,
  .page-create .create-col--catalog .items-bag,
  .page-create .create-col--catalog .items-bag__stage {
    height: 100%;
    max-height: 100%;
    min-height: 0;
  }

  .page-create .create-col--catalog .items-layout {
    display: block;
    overflow: hidden;
  }

  .page-create .create-col--catalog .items-bag {
    width: 100%;
    max-width: none;
  }

  .page-create .create-col--catalog .items-bag__stage > .bpb-bg {
    width: 100%;
    max-width: none;
    align-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: auto;
    touch-action: pan-x;
    overscroll-behavior: none;
  }

  /* Keep the item board full width. Inset only the scrollbar: the same gap
     from the left screen edge and from the chest's left edge. */
  .page-create .create-col--catalog .items-bag__stage > .bpb-bg::-webkit-scrollbar {
    height: 12px;
  }

  .page-create .create-col--catalog .items-bag__stage > .bpb-bg::-webkit-scrollbar-track {
    --create-catalog-scroll-gap: 0.65rem;
    /* Mobile chest: right 0.35rem, padding 0.4rem, sprite 7.5rem. */
    --create-chest-from-right: calc(max(0.35rem, env(safe-area-inset-right, 0px)) + 0.4rem + 7.5rem);
    /* Margin is the thumb's travel limit. A wide border only clips the track
       paint, so the thumb kept sliding past the visible end. */
    border-width: 3px 0;
    border-style: solid;
    border-color: var(--bpb-bg-scroll-frame);
    margin-left: var(--create-catalog-scroll-gap);
    margin-right: calc(var(--create-catalog-scroll-gap) + var(--create-chest-from-right));
    border-radius: 16px;
    background: var(--bpb-bg-scroll-track);
    background-clip: border-box;
  }

  .page-create .create-col--catalog .bpb-bg__item:not(.bpb-bg__item--parked) {
    /* Horizontal pans scroll the strip. An upward touch is claimed as a drag. */
    touch-action: pan-x;
  }

  .page-create .create-board .bpb-bg__item,
  .page-create .create-board__park-chip {
    touch-action: none;
  }

  body.page-create.is-bpb-dragging,
  body.page-create.is-bpb-dragging .create-col--catalog .items-bag__stage > .bpb-bg,
  body.page-create.is-bpb-dragging .create-col--catalog .bpb-bg__item {
    touch-action: none;
  }

  .page-create .create-col--catalog .bpb-bg__board {
    max-width: none;
  }

  .page-create .create-col--catalog .items-filters.create-rail.bpb-filter-drawer__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    width: min(22rem, 88vw);
    max-width: 88vw;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    transform: translateX(105%);
    background: #5c4030;
  }

  .page-create .bpb-filter-drawer.is-filters-open {
    z-index: 200001;
  }

  .page-create .bpb-filter-drawer.is-filters-open .items-filters.create-rail.bpb-filter-drawer__panel {
    transform: translateX(0);
    z-index: 200001;
  }

  .page-create .bpb-filter-drawer.is-filters-open .bpb-filter-drawer__backdrop {
    z-index: 200000;
  }

  .page-create .bpb-filter-drawer__toggle {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .create-board__park {
    --park-chip: 2.6rem;
    --park-gap: 0.25rem;
    margin-top: 0.15rem;
    padding: 0.28rem 0.4rem 0.22rem;
  }

  .create-board__park-tray {
    display: grid;
    grid-template-columns: repeat(var(--park-fill-cols, var(--park-cols)), var(--park-chip));
    grid-template-rows: repeat(var(--park-rows), var(--park-chip));
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: calc(
      var(--park-rows) * var(--park-chip) + (var(--park-rows) - 1) * var(--park-gap) +
        var(--park-gap) + var(--park-bar)
    );
    padding-bottom: var(--park-gap);
    gap: var(--park-gap);
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior: none;
  }

  .create-board__park-chip {
    width: var(--park-chip);
    max-width: var(--park-chip);
  }

  .create-board__park-empty {
    width: auto;
  }

  .create-sellbin {
    bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    width: calc(7.5rem + 0.8rem);
    padding: 0.4rem;
  }

  .create-sellbin__chest {
    width: 7.5rem;
    margin-top: 0;
  }

  /* history.db upload is intentionally desktop-only; avoid leaving an empty
     "or upload" block in the mobile onboarding overlay. */
  .create-onboard__actions {
    display: none;
  }
}

/* Wider than the phone/tablet split: calculated board/catalog sizes, full 32rem rail,
   catalog packed against the rail (no flexible gutter between them). */
@media (min-width: 1101px) {
  .page-create .create-main {
    /* Scale the desktop composition down from the 2560px reference rather
       than keeping the board and rail at their largest fixed widths. */
    --create-rail-width: clamp(21rem, 20vw, 32rem);
    --items-side-gap: clamp(0.5rem, 0.625vw, 1rem);
    /* Match the bottom clearance to the screen-frame inset used at the sides. */
    padding-bottom: max(
      0.75rem,
      calc(var(--bpb-frame-edge-y, 0px) + var(--items-side-gap))
    );
  }

  .page-create .bpb-filter-drawer {
    padding-right: 0;
  }

  .page-create .bpb-filter-drawer__toggle,
  .page-create .bpb-filter-drawer__backdrop,
  .page-create .bpb-filter-drawer__close {
    display: none !important;
  }

  .page-create .create-col--catalog .items-layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--items-side-gap);
    width: 100%;
    max-width: 100%;
  }

  .page-create .create-col--catalog .items-bag {
    /* Grow into the space before the rail so the page insets match. */
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .page-create .items-filters.create-rail.bpb-filter-drawer__panel {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    z-index: auto;
    flex: 0 0 var(--items-filters-width);
    width: var(--items-filters-width);
    max-width: var(--items-filters-width);
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    transform: none;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }

  /* The sell chest docks beside Parked, so the Filter|Build rail runs the
     full column height and lines up with the board column. */
  .page-create .create-col--catalog .items-filters.create-rail {
    zoom: 1;
    height: 100%;
    max-height: 100%;
  }

  .page-create .create-col--catalog .items-filters.create-rail .cr-panel--build {
    padding-bottom: 1rem;
  }

  /* The shared Items desktop density rule also matches this rail. Scale only
     panel contents so the responsive rail column stays usable at 1080p. */
  .page-create .create-col--catalog .items-filters.create-rail .cr-panel {
    zoom: clamp(0.66, calc(100vw / 2560px), 1);
  }

  /* Prevent the Build/Filter rail contents from clipping as the rail narrows
     on 1080p and 1440p desktops. */
  .page-create .cr-tab {
    padding-inline: clamp(0.65rem, 0.82vw, 1.05rem);
    font-size: clamp(1.05rem, 0.98vw, 1.25rem);
  }

  .page-create .cr-submit {
    padding-inline: clamp(0.6rem, 0.7vw, 0.9rem);
    font-size: clamp(1rem, 0.9vw, 1.15rem);
  }

  .page-create .cr-label {
    font-size: clamp(1.2rem, 1.27vw, 1.625rem);
  }

  .page-create .build-info__list-item img {
    width: clamp(2.4rem, 3.12vw, 4rem);
    height: clamp(2.4rem, 3.12vw, 4rem);
  }

  .page-create .build-info__tier--wide .build-info__list-item img {
    width: clamp(2.15rem, 2.73vw, 3.5rem);
    height: clamp(2.15rem, 2.73vw, 3.5rem);
  }
}

/* Short desktop viewports (notably 1080p) need the board stage to give back
 * height so the two-row Parked tray remains in view. The board art scales
 * inside that stage; toolbar and Parked keep their own usable sizes. */
@media (min-width: 1101px) and (max-height: 1100px) {
  .page-create .create-col--board {
    height: 100%;
    min-height: 0;
  }

  .page-create .create-col--board .create-board {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    gap: clamp(0.45rem, 1vh, 1.15rem);
  }

  .page-create .create-board__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    container-type: size;
  }

  .page-create .create-board__stage .create-board__bag {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 864px;
    height: 672px;
    margin: 0;
    transform-origin: center center;
    transform: translate(-50%, -50%) scale(
      min(
        calc((100cqw - 0.75rem) / 864px),
        calc((100cqh - 0.5rem) / 672px)
      )
    );
  }

  .page-create .create-board__dock {
    flex: 0 0 auto;
  }
}

/* Desktop Parked is a compact horizontal storage carousel. The mobile layout
 * below intentionally keeps its two-row strip for touch scanning. */
@media (min-width: 1101px) {
  /* The create workspace needs a little more vertical breathing room. The
     fixed nav's in-flow spacer follows this measured height automatically. */
  .page-create .site-nav {
    padding-bottom: 3.8rem;
  }

  @media (max-width: 1366px) {
    .page-create .site-nav {
      padding-bottom: 3.2rem;
    }
  }

  .page-create .create-board__dock {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.35rem;
  }

  .page-create .create-board__sell-slot {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
  }

  /* Docked chest: in flow beside Parked, sized to the one-row strip. */
  .page-create .create-board__sell-slot .create-sellbin {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: auto;
    padding: 0.25rem 0.15rem;
  }

  .page-create .create-board__sell-slot .create-sellbin__chest {
    width: 8.5rem;
    margin-top: 0;
  }

  .page-create .create-board__park {
    --park-rows: 1;
    --park-cols: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
  }

  .page-create .create-board__park-tray {
    position: relative;
    grid-auto-flow: column;
    grid-auto-columns: var(--park-chip);
    grid-template-columns: none;
    grid-template-rows: var(--park-chip);
    box-sizing: border-box;
    height: calc(var(--park-chip) + var(--park-gap) + var(--park-bar));
    padding-bottom: var(--park-gap);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
  }

  .page-create .create-board__park-chip {
    width: var(--park-chip);
    max-width: var(--park-chip);
  }

  .page-create .create-board__park-empty {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* OptionsFont stays 26px at 1440p and shrinks with the rail below that. */
.page-create .il-filter__check-label,
.page-create .il-filter__count {
  font-size: clamp(1.05rem, 1.35vw, 1.625rem);
}

/* Narrow rail: keep Submit and class/type icons inside the column. */
.page-create .cr-tabs-bar {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.page-create .il-filter__classes,
.page-create .il-filter__types {
  flex-wrap: wrap;
}