.tool-overlay.cleaning-overlay { z-index: 70; }
.cleaning-panel {
  width: min(510px, 100%);
  min-height: 0;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #183c36;
}
.cleaning-panel[data-mode="forging"] { background: #292f2a; border-color: #c99558; }
.cleaning-process, .cleaning-reveal { min-height: 0; padding: 28px 24px 24px; }
.cleaning-process { gap: 10px; }
.cleaning-process[hidden], .cleaning-reveal[hidden] { display: none; }
.cleaning-process h2 { font-size: 28px; margin: 0; }
#workshopMaterial { font-size: 12px; color: #c2ccb8; min-height: 18px; overflow-wrap: anywhere; }
#workshopCanvas { display: block; width: 100%; aspect-ratio: 3 / 2; min-width: 0; height: auto; }
.workshop-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; list-style: none; width: 100%; margin: 0; padding: 0; }
.workshop-stages li { position: relative; padding: 8px 0 0; border-top: 2px solid #688278; color: #9bb0a6; font-size: 11px; white-space: nowrap; transition: color 180ms, border-color 180ms; }
.workshop-stages li.is-current { color: #ffe7a8; border-color: #e9bb6b; font-weight: 700; }
.workshop-stages li.is-complete { color: #9ed1b6; border-color: #80bc9c; }
#workshopStatus { color: #f0dfb3; font-size: 14px; min-height: 20px; }
.cleaning-process .cleaning-progress { width: 100%; margin: 0; height: 3px; }
.cleaning-process .cleaning-progress i { width: 100%; transform-origin: left; transform: scaleX(0); animation: none; }
.workshop-skip { min-height: 36px; padding: 4px 16px; border: 1px solid #85917c; border-radius: 4px; color: #d4d8c8; background: transparent; cursor: pointer; font: inherit; font-size: 12px; }
.workshop-skip:hover { background: #ffffff0f; }
.cleaning-reveal { gap: 8px; }
.cleaning-reveal h2 { font-size: 26px; line-height: 1.4; margin: 0; }
.cleaning-reveal .cleaning-prize-coin { margin: 18px 0 14px; }
.cleaning-prize-coin::before { animation: none; opacity: 0.45; }
.cleaning-reveal .workshop-receipt { font-size: 12px; line-height: 1.5; color: #b4c4b4; margin-top: 3px; }
.cleaning-reveal::after { display: none; }
.cleaning-accept { margin-top: 10px; }
@media (max-width: 600px) {
  .cleaning-overlay { padding: 8px; }
  .cleaning-panel { max-height: calc(100dvh - 16px); }
  .cleaning-process, .cleaning-reveal { padding: 24px 18px 20px; }
  .cleaning-process h2 { font-size: 24px; }
  .cleaning-reveal h2 { font-size: 22px; }
  .cleaning-close { top: 10px; right: 10px; }
}
@media (max-height: 600px) {
  #workshopCanvas { width: min(100%, 330px); }
  .cleaning-process, .cleaning-reveal { padding-top: 20px; gap: 6px; }
  .cleaning-reveal .cleaning-prize-coin { width: 126px; height: 126px; }
}
@media (prefers-reduced-motion: reduce) {
  .workshop-stages li { transition: none; }
  .cleaning-panel, .cleaning-reveal, .cleaning-prize-coin { animation: none; }
}

/* Quiet porcelain and jade surfaces keep the specimen, not the effect, central. */
#cleaningPanel {
  --prize-accent: #79622e;
  color: #253f3a; background: #fafbf8; border-color: #b9c8bb;
  box-shadow: 0 18px 60px #183b2933; animation: workshop-arrive 180ms ease-out both;
}
#cleaningPanel::before { display: none; }
#cleaningPanel.is-revealed { animation: none; }
#cleaningPanel.cleaning-window-level-1 { --prize-accent: #356c4b; }
#cleaningPanel.cleaning-window-level-2, #cleaningPanel.cleaning-window-level-3 { --prize-accent: #a04336; }
#cleaningPanel .cleaning-process, #cleaningPanel .cleaning-reveal { padding: 20px; gap: 8px; }
#cleaningPanel .cleaning-kicker { color: #526d5d; }
#cleaningPanel .cleaning-process h2 { font-size: 24px; line-height: 1.4; color: #253f3a; }
#cleaningPanel .cleaning-reveal h2 { color: var(--prize-accent); font-size: 24px; }
#cleaningPanel p, #cleaningPanel #workshopMaterial, #cleaningPanel .workshop-receipt { color: #5b6d61; }
#cleaningPanel #workshopMaterial { min-height: 18px; }
#cleaningPanel #workshopCanvas { background: #e8ede5; border-radius: 4px; }
#cleaningPanel .workshop-stages li { border-color: #ccd6ca; color: #647668; font-size: 12px; padding-top: 6px; }
#cleaningPanel .workshop-stages li.is-current { border-color: #a04336; color: #984031; }
#cleaningPanel .workshop-stages li.is-complete { border-color: #557b60; color: #41634c; }
#cleaningPanel #workshopStatus { color: #355d50; min-height: 21px; }
#cleaningPanel .cleaning-progress { background: #dce4d9; }
#cleaningPanel .cleaning-progress i { background: #557b60; }
#cleaningPanel .workshop-skip { min-height: 44px; min-width: 120px; color: #355d50; border-color: #bfccbf; }
#cleaningPanel .workshop-skip:hover { background: #edf2ea; }
#cleaningPanel .cleaning-reveal { animation: workshop-arrive 200ms ease-out both; }
#cleaningPanel .cleaning-prize-coin { width: 148px; height: 148px; margin: 12px 0; animation: workshop-coin-in 280ms ease-out both; filter: drop-shadow(0 7px 7px #25432b24); }
#cleaningPanel .cleaning-prize-coin::before { display: none; }
#cleaningPanel .cleaning-reveal p strong { color: #355d50; }
#cleaningPanel .workshop-actions .cleaning-accept { margin: 0; background: #355d50; color: #fff; border: 1px solid #355d50; }
#cleaningPanel .workshop-actions #workshopCollectBtn { background: #eaf1e7; color: #355d50; border-color: #b9c8bb; }
#cleaningPanel .workshop-actions #workshopViewCoinBtn, #cleaningPanel .workshop-actions #cleaningAcceptBtn { background: transparent; color: #52685a; border-color: transparent; }
#cleaningPanel .cleaning-close { color: #355d50; background: #edf2ea; border-color: #bdcbbd; }
@keyframes workshop-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes workshop-coin-in { from { opacity: .5; transform: translateY(7px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 600px) {
  #cleaningPanel .cleaning-process, #cleaningPanel .cleaning-reveal { padding: 20px 16px 16px; }
  #cleaningPanel .cleaning-reveal h2 { font-size: 22px; }
  #cleaningPanel .cleaning-prize-coin { width: 118px; height: 118px; }
}
@media (max-height: 650px) {
  #cleaningPanel .cleaning-process, #cleaningPanel .cleaning-reveal { padding: 14px; gap: 5px; }
  #cleaningPanel #workshopCanvas { width: min(100%, 280px); }
  #cleaningPanel .cleaning-prize-coin { width: 100px; height: 100px; margin: 8px 0; }
}
@media (max-height: 450px) and (min-width: 600px) {
  #cleaningPanel { width: min(740px, 100%); }
  #cleaningPanel .cleaning-process { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  #cleaningPanel #workshopCanvas { grid-column: 1; grid-row: 1 / 8; width: 100%; }
  #cleaningPanel .cleaning-process > :not(canvas) { grid-column: 2; }
  #cleaningPanel .cleaning-reveal { grid-template-columns: 120px 1fr; column-gap: 18px; }
  #cleaningPanel .cleaning-reveal > :not(.cleaning-prize-coin) { grid-column: 2; }
  #cleaningPanel .cleaning-prize-coin { grid-column: 1; grid-row: 1 / 8; align-self: center; }
}
.reduce-motion #cleaningPanel, .reduce-motion #cleaningPanel .cleaning-reveal, .reduce-motion #cleaningPanel .cleaning-prize-coin { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #cleaningPanel, #cleaningPanel .cleaning-reveal, #cleaningPanel .cleaning-prize-coin { animation: none; }
}