.continuous-workshop {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: #5b361e url("/assets/crafting/bench.webp") center/cover no-repeat;
  color: #fff3d6;
  font-family: "Be Vietnam Pro", sans-serif;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
}
.continuous-workshop:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
      #16342c55,
      transparent 17%,
      transparent 78%,
      #1d100888
    ),
    radial-gradient(ellipse at center, transparent 38%, #24120744);
}
.cw-head {
  position: absolute;
  z-index: 20;
  left: 16px;
  right: 16px;
  top: 10px;
  height: 54px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-shadow: 0 2px 7px #261207;
}
.cw-head small {
  font-size: 8px;
  letter-spacing: 2px;
}
.cw-head h2 {
  font:
    600 21px Lora,
    serif;
  margin: 3px 0;
}
.cw-ticket {
  margin-left: auto;
  width: 270px;
  min-height: 50px;
  padding: 9px 14px;
  background: #f4e8c8;
  color: #483d2e;
  box-shadow: 0 7px 18px #2c160755;
  transform: rotate(0.6deg);
  text-align: left;
  border: 1px solid #c7aa75;
}
.cw-ticket b {
  display: block;
  font: 600 12px Lora;
}
.cw-ticket span {
  display: block;
  font-size: 11px;
  line-height: 1.5;
}
.cw-ticket:not(.open) span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-crate,
.cw-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #d9b578;
  background: #6e4929;
  color: #fff3d3;
  font-size: 19px;
}
.cw-close {
  background: #2c1b12;
}
.cw-station-nav {
  position: absolute;
  z-index: 18;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  padding: 5px;
  background: #2b1a10aa;
  border: 1px solid #b17b43;
  border-radius: 8px;
  box-shadow: 0 5px 14px #1b0c0555;
}
.cw-station-nav button {
  min-height: 38px;
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: #dcc296;
  color: #49331f;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 0 #79512b;
}
.cw-station-nav button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #79512b;
}
.cw-viewport {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: min(1280px, 100vw);
  height: min(720px, calc(100dvh - 100px));
  overflow: hidden;
}
.cw-viewport canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px !important;
  height: 720px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  cursor: grab;
  touch-action: none;
  transition: transform 0.28s ease-out;
}
.cw-viewport canvas:active {
  cursor: grabbing;
}
.cw-world-hooks {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.cw-drawer {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 100px;
  transform: translate(-50%, 130%);
  width: min(930px, calc(100vw - 120px));
  min-height: 112px;
  max-height: 172px;
  padding: 10px 14px 12px;
  border: 1px solid #c39961;
  border-radius: 14px;
  background: #3a2416eb;
  box-shadow: 0 12px 34px #1d0d0666;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.25s,
    opacity 0.2s;
  overflow: hidden;
}
.cw-action-dock {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 150px));
  text-align: center;
  pointer-events: none;
}
.cw-action-dock button {
  width: 100%;
  min-height: 56px;
  padding: 12px 22px;
  border: 2px solid #f2d393;
  border-radius: 12px;
  background: #2f6656;
  color: #fff7df;
  box-shadow:
    0 6px 0 #173e34,
    0 10px 24px #1c0d0666;
  font-size: 16px;
  font-weight: 800;
  pointer-events: auto;
}
.cw-action-dock button:disabled {
  opacity: 0.55;
  filter: grayscale(0.55);
}
.cw-action-dock small {
  display: block;
  margin-top: 6px;
  color: #fff0cc;
  font-size: 12px;
  text-shadow: 0 2px 5px #241006;
}
.continuous-workshop[data-busy="true"] .cw-action-dock button {
  background: #a66f38;
}
.cw-drawer.open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.cw-drawer > b {
  display: block;
  text-align: center;
  font: 600 13px Lora;
  margin-bottom: 5px;
}
.cw-drawer p {
  text-align: center;
  margin: 12px;
  font-size: 11px;
}
.cw-object-row {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.cw-object-row > button {
  position: relative;
  flex: 0 0 96px;
  height: 90px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff0d1;
  filter: drop-shadow(0 5px 4px #160a0566);
}
.cw-object-row > button img {
  display: block;
  width: 94px;
  height: 68px;
  object-fit: contain;
}
.cw-object-row > button span {
  display: block;
  margin-top: -5px;
  font-size: 11px;
  text-shadow: 0 2px 4px #1c0d06;
}
.cw-object-row > button:disabled {
  opacity: 0.25;
  filter: grayscale(1);
}
.cw-object-row > button:active {
  transform: translateY(-5px);
}
.cw-object-row > button.active {
  outline: 3px solid #ffe08a;
  outline-offset: -3px;
  border-radius: 9px;
  background: #f7dfaa26;
  transform: translateY(-4px);
}
.cw-templates > button {
  flex-basis: 96px;
}
.cw-templates > button img {
  width: 94px;
}
.cw-ruler {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  padding: 8px;
  background: linear-gradient(#d7a853, #9e692c);
  border: 2px solid #70451f;
}
.cw-ruler-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
.cw-ruler-stack section > span {
  display: block;
  margin-bottom: 3px;
  color: #f7e6c4;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.cw-ruler-stack .cw-ruler {
  padding: 3px;
}
.cw-ruler-stack .cw-ruler button {
  flex: 1 1 14.285%;
  min-width: 36px;
  height: 43px;
}
.cw-ruler button.active {
  background: #fff0b855;
  outline: 2px solid #ffe394;
}
.cw-ruler button {
  flex: 0 0 43px;
  height: 48px;
  border: 0;
  border-left: 1px solid #6c421d;
  background: transparent;
  color: #2f2114;
  font-weight: 700;
}
.cw-ruler button:before {
  content: "";
  display: block;
  width: 1px;
  height: 16px;
  background: #3f2917;
  margin: 0 auto 4px;
}
.cw-swatches {
  display: flex;
  align-items: end;
  gap: 3px;
  padding: 0 6px;
}
.cw-swatches button {
  flex: 0 0 47px !important;
  width: 47px !important;
}
.cw-swatches i {
  display: block;
  width: 37px;
  height: 34px;
  margin: auto;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 35% 25%, #fff9, transparent 30%),
    var(--swatch);
  border: 4px solid #cba76e;
  box-shadow: inset 0 -5px 5px #24130a55;
}
.cw-tag {
  display: block;
  margin: 8px auto;
  padding: 9px 16px;
  border: 1px solid #c9a268;
  border-radius: 6px;
  background: #31594d;
  color: #fff3d5;
}
.cw-finish-layout {
  display: grid;
  grid-template-columns: 150px 1fr 1.25fr;
  gap: 8px;
  align-items: center;
}
.cw-finish-layout section > b {
  display: block;
  margin-bottom: 4px;
  color: #ffe7b4;
  font: 600 12px Lora, serif;
  text-align: center;
}
.cw-finish-layout .cw-object-row > button {
  flex-basis: 72px;
  width: 72px;
  height: 76px;
}
.cw-finish-layout .cw-object-row > button img {
  width: 70px;
  height: 56px;
}
.cw-finish-preview canvas {
  display: block;
  width: 145px;
  height: auto;
  border-radius: 10px;
  background: #f3dba818;
}
.cw-choice-summary {
  grid-column: 1 / -1;
  margin: 2px 0 0 !important;
  color: #ffe6b5;
  font-size: 11px;
}
.cw-choice-summary button {
  min-height: 36px;
  margin-left: 6px;
  padding: 6px 10px;
  border: 1px solid #cba86d;
  border-radius: 7px;
  background: #67432b;
  color: #fff0cf;
  font-weight: 700;
}
.cw-strap-patterns > button {
  flex-basis: 110px;
}
.cw-tutorial-cue {
  position: fixed;
  z-index: 80;
  transform: translate(-20%, -100%);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 7px 10px;
  border: 2px solid #ffe08a;
  border-radius: 12px;
  background: #2c5f50ee;
  color: #fff7df;
  box-shadow: 0 6px 18px #170b0755;
  pointer-events: none;
  animation: cw-tutorial-pulse 1s ease-in-out infinite;
}
.cw-tutorial-cue[hidden] {
  display: none;
}
.cw-tutorial-cue span {
  font-size: 24px;
}
.cw-tutorial-cue b {
  font-size: 11px;
}
@keyframes cw-tutorial-pulse {
  50% { transform: translate(-20%, -108%) scale(1.04); }
}
.cw-object-tools {
  position: absolute;
  z-index: 25;
  left: 18px;
  bottom: 14px;
  display: flex;
  gap: 6px;
}
.cw-object-tools button {
  width: 64px;
  height: 58px;
  padding: 2px;
  border: 1px solid #b88b52;
  border-radius: 8px;
  background: #d9bd8d;
  color: #48311d;
  box-shadow: 0 4px 0 #704522;
  font-size: 11px;
}
.cw-object-tools button img {
  width: 48px;
  height: 38px;
  object-fit: contain;
}
.cw-object-tools button span,
.cw-object-tools button small {
  display: block;
  font-size: 11px;
  font-weight: 700;
}
.cw-object-tools button.active {
  outline: 3px solid #ffe18a;
  transform: translateY(-4px);
  background: #f3dbad;
}
@media (max-width: 700px) {
  .cw-head {
    left: 8px;
    right: 8px;
    top: 6px;
  }
  .cw-head h2 {
    font-size: 16px;
  }
  .cw-head small {
    font-size: 6px;
  }
  .cw-ticket {
    width: 172px;
    min-height: 43px;
    padding: 7px 9px;
  }
  .cw-ticket b {
    font-size: 10px;
  }
  .cw-ticket span {
    font-size: 10px;
  }
  .cw-crate,
  .cw-close {
    width: 36px;
    height: 36px;
  }
  .cw-station-nav {
    left: 7px;
    right: 7px;
    top: 55px;
    transform: none;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .cw-station-nav button {
    flex: 0 0 72px;
    padding: 5px 6px;
  }
  .cw-viewport {
    left: 0;
    right: 0;
    top: 99px;
    bottom: 0;
    transform: none;
    width: auto;
    height: auto;
  }
  .cw-drawer {
    bottom: 92px;
    width: calc(100vw - 20px);
    max-height: 320px;
    min-height: 105px;
  }
  .cw-action-dock {
    bottom: 8px;
    width: calc(100vw - 24px);
  }
  .cw-action-dock button {
    min-height: 52px;
    font-size: 15px;
  }
  .cw-action-dock small {
    font-size: 10px;
  }
  .cw-object-row {
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
  }
  .cw-object-row > button {
    flex: 0 0 calc(33.333% - 6px);
    width: calc(33.333% - 6px);
    max-width: 106px;
    height: 78px;
  }
  .cw-object-row > button img {
    width: 100%;
    height: 58px;
  }
  .cw-ruler {
    flex-wrap: wrap;
    overflow: hidden;
  }
  .cw-ruler-stack {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .cw-ruler-stack .cw-ruler {
    flex-wrap: nowrap;
  }
  .cw-finish-layout {
    grid-template-columns: 86px 1fr;
    align-items: start;
    max-height: 286px;
    overflow-y: auto;
  }
  .cw-finish-preview {
    grid-row: 1 / 3;
  }
  .cw-finish-preview canvas {
    width: 82px;
  }
  .cw-finish-layout section .cw-object-row {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .cw-finish-layout .cw-object-row > button {
    flex: 0 0 72px;
    width: 72px;
  }
  .cw-ruler button {
    flex: 0 0 14.285%;
  }
  .cw-swatches {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .cw-swatches button {
    width: 100% !important;
    min-width: 0;
  }
  .cw-object-tools {
    left: 8px;
    bottom: 8px;
  }
  .cw-object-tools button {
    width: 55px;
    height: 52px;
  }
  .cw-object-tools button img {
    width: 42px;
    height: 32px;
  }
}
@media (max-height: 500px) and (min-width: 650px) {
  .cw-head {
    top: 4px;
  }
  .cw-head h2 {
    font-size: 16px;
  }
  .cw-head small {
    font-size: 6px;
  }
  .cw-ticket {
    min-height: 40px;
    height: 40px;
    width: 240px;
    padding: 5px 10px;
  }
  .cw-crate,
  .cw-close {
    width: 36px;
    height: 36px;
  }
  .cw-station-nav {
    top: 48px;
  }
  .cw-station-nav button {
    min-height: 32px;
    padding: 4px 9px;
  }
  .cw-viewport {
    top: 85px;
    bottom: 0;
    height: auto;
    transform: translateX(-50%);
  }
  .cw-drawer {
    bottom: 78px;
    width: min(724px, calc(100vw - 28px));
    height: 128px;
    min-height: 128px;
    max-height: 128px;
    padding: 6px 10px 8px;
    box-sizing: border-box;
    overflow: hidden;
    transition: none;
    isolation: isolate;
  }
  .cw-action-dock {
    bottom: 5px;
    width: min(390px, calc(100vw - 120px));
  }
  .cw-action-dock button {
    min-height: 44px;
    padding: 7px 16px;
    font-size: 14px;
  }
  .cw-action-dock small {
    margin-top: 3px;
    font-size: 9px;
  }
  .cw-drawer.open {
    pointer-events: auto;
  }
  .cw-drawer > b {
    line-height: 16px;
    margin-bottom: 3px;
  }
  .cw-object-row {
    height: 92px;
    justify-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .cw-templates > button {
    flex: 0 0 72px;
    width: 72px;
  }
  .cw-templates > button img {
    width: 70px;
  }
  .cw-object-row > button {
    height: 78px;
  }
  .cw-object-row > button img {
    height: 56px;
  }
  .cw-object-tools {
    bottom: 5px;
  }
  .cw-object-tools button {
    height: 46px;
  }
}

/* Focused workshop preview: one work area, one choice tray, one action. */
.cw-station-nav { display:none; }
.continuous-workshop:before { background:linear-gradient(180deg,#1c261b66,transparent 24%,transparent 72%,#1a100acc),radial-gradient(ellipse at 38% 44%,transparent 20%,#28160755); }
.cw-head { left:32px;right:28px;top:22px; }
.cw-head h2 {font-size:27px;margin-top:4px;}
.cw-head small {font-size:9px;letter-spacing:2px;color:#f2c98f;}
.cw-ticket {width:320px;min-height:74px;padding:12px 19px;background:#f5e6bff5;border:1px solid #a98651;border-radius:3px 3px 12px 3px;box-shadow:0 8px 18px #28140866;}
.cw-ticket b {font-size:14px;margin-bottom:5px;}
.cw-ticket span,.cw-ticket:not(.open) span {font-size:12px;white-space:normal;line-height:1.55;}
.cw-viewport {left:34%;top:49%;width:min(780px,calc(100vw - 430px));height:min(580px,calc(100dvh - 210px));transform:translate(-50%,-50%);}
.cw-viewport canvas {cursor:default;}
.cw-drawer {left:auto;right:32px;top:140px;bottom:auto;width:330px;min-height:220px;max-height:calc(100dvh - 290px);box-sizing:border-box;padding:22px 18px;background:linear-gradient(145deg,#4f3326f7,#2f2019fa);border:1px solid #b48b50;border-radius:16px;transform:translateX(24px);box-shadow:inset 0 0 0 4px #1e130d44,0 16px 36px #21100866;}
.cw-drawer.open {transform:none;}
.cw-drawer > b {font-size:19px;text-align:left;margin-bottom:20px;color:#f6d69b;}
.cw-object-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 7px;overflow:visible;align-items:start;}
.cw-object-row > button {width:100%;height:91px;min-width:0;border:1px solid #aa845738;border-radius:10px;background:#d3ae6f0d;filter:none;}
.cw-object-row > button img,.cw-templates > button img {width:100%;height:65px;filter:drop-shadow(0 5px 3px #1a0c0880);}
.cw-object-row > button span {font-size:12px;line-height:1.5;margin:0;}
.cw-object-row > button.active {outline:2px solid #efca7b;outline-offset:0;background:linear-gradient(#eed1982b,#b9843926);transform:none;box-shadow:0 3px 9px #1b0c0655;}
.cw-swatches {grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px 4px;width:100%;padding:12px 0 0;border-top:1px solid #b18b5533;}
.cw-swatches button {width:100%!important;min-height:53px;border-radius:7px;border:0;background:transparent;color:#f9e7c1;}
.cw-swatches button.active {background:#e7c58428;outline:2px solid #eac172;}
.cw-ruler {display:grid;grid-template-columns:repeat(7,1fr);padding:5px;}
.cw-ruler button {height:49px;}
.cw-action-dock {left:34%;bottom:30px;width:min(460px,calc(100vw - 470px));}
.cw-action-dock button {min-height:60px;border-radius:12px;background:linear-gradient(#397664,#225344);border:1px solid #f0d59c;box-shadow:inset 0 2px 0 #ffffff20,0 5px 0 #163d31,0 10px 25px #180c0780;font-size:18px;}
.cw-action-dock small {font-size:12px;margin-top:12px;}
@media(min-width:1600px) { .cw-viewport {width:900px;height:650px;} .cw-drawer {right:5%;width:360px;top:170px;} }
@media(max-width:900px) {
 .cw-head {left:12px;right:12px;top:10px;} .cw-head h2 {font-size:20px;} .cw-head small {font-size:7px;}
 .cw-ticket {width:190px;min-height:56px;padding:8px 10px;} .cw-ticket b {font-size:11px;margin-bottom:2px;} .cw-ticket span,.cw-ticket:not(.open) span {font-size:10px;}
 .cw-viewport {left:0;right:0;top:85px;bottom:85px;width:auto;height:auto;transform:none;}
 .cw-drawer {left:10px;right:10px;top:auto;bottom:98px;width:auto;min-height:0;max-height:330px;padding:13px 14px;transform:translateY(25px);border-radius:13px;}
 .cw-drawer > b {font-size:16px;margin-bottom:10px;} .cw-object-row {gap:6px;grid-template-columns:repeat(3,minmax(0,1fr));height:auto;}
 .cw-object-row > button {height:76px;max-width:none;} .cw-object-row > button img,.cw-templates > button img {height:50px;width:100%;}
 .cw-action-dock {left:12px;bottom:16px;width:calc(100vw - 24px);transform:none;} .cw-action-dock button {min-height:52px;font-size:16px;} .cw-action-dock small {margin-top:8px;font-size:10px;}
}
@media(max-height:500px) and (min-width:650px) {
 .cw-viewport {right:315px;top:76px;bottom:74px;} .cw-drawer {left:auto;right:12px;top:82px;bottom:16px;width:290px;max-height:none;height:auto;min-height:0;overflow:auto;padding:12px;}
 .cw-drawer > b {font-size:15px;margin-bottom:8px;} .cw-object-row {grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;} .cw-object-row > button {height:60px;} .cw-object-row > button img,.cw-templates > button img {height:37px;} .cw-object-row > button span {font-size:10px;}
 .cw-action-dock {left:16px;bottom:12px;width:calc(100vw - 350px);} .cw-action-dock button {min-height:44px;font-size:14px;} .cw-action-dock small {font-size:9px;margin-top:6px;}
 .cw-finish-layout {grid-template-columns:70px minmax(0,1fr);gap:4px 8px;align-items:start;max-height:none;overflow:visible;}
 .cw-finish-preview {grid-row:1 / 3;}
 .cw-finish-preview canvas {width:68px;}
 .cw-finish-layout section .cw-object-row {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;overflow:visible;}
 .cw-finish-layout .cw-object-row > button {width:100%;height:50px;min-width:0;}
 .cw-finish-layout .cw-object-row > button img {width:100%;height:31px;}
 .cw-finish-layout .cw-object-row > button span {font-size:8px;line-height:1.15;}
 .cw-finish-layout section > b {margin-bottom:2px;font-size:10px;}
 .cw-finish-layout .cw-choice-summary {font-size:9px;}
}

/* Feedback 2026-11-08: finish and decoration are distinct choices with a
   real preview, so this drawer intentionally gets more room than other trays. */
@media (min-width: 901px) {
  .cw-drawer:has(.cw-finish-layout) {
    width: 450px;
    padding: 16px;
  }
  .cw-finish-layout {
    grid-template-columns: 118px 1fr;
    gap: 8px 12px;
    align-items: center;
  }
  .cw-finish-preview {
    grid-row: 1 / 3;
  }
  .cw-finish-preview canvas {
    width: 116px;
  }
  .cw-finish-layout section .cw-object-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }
  .cw-finish-layout .cw-object-row > button {
    width: 100%;
    height: 67px;
  }
  .cw-finish-layout .cw-object-row > button img {
    width: 100%;
    height: 45px;
  }
  .cw-finish-layout .cw-object-row > button span {
    font-size: 10px;
  }
}