/* ==========================================================================
   Minecraft Voxel Studio · Kid-First Advanced Workshop (工坊乐园)
   Styling harmonized with Little Pals: large touch cards, pastel tones,
   3D Minecraft character mannequin preview, and full-screen immersive arena.
   ========================================================================== */

/* Workshop Base and Hall */
.workshop-container {
  max-width: 1440px;
  margin: 0 auto;
  color: #39483e;
}

/* Hero Meadow Banner for Workshop */
.ws-hero {
  min-height: 290px;
  border: 1px solid #dee7cc;
  background: linear-gradient(120deg, #edf3db, #e5eed0 55%, #d9e7c4);
  border-radius: 28px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 34px 44px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(116, 145, 93, 0.08);
}
.ws-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 62%;
}
.ws-hero-copy h1 {
  font-size: 36px;
  line-height: 1.35;
  margin: 10px 0 12px;
  color: #274031;
}
.ws-hero-copy p {
  font-size: 15px;
  line-height: 1.8;
  color: #7a8c66;
  margin: 0 0 22px;
  max-width: 480px;
}
.ws-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ws-hero-mannequin {
  width: 250px;
  height: 250px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-hero-canvas-wrap {
  width: 100%;
  height: 100%;
}
.ws-grass-decor {
  position: absolute;
  bottom: 0px;
  left: 35px;
  right: 25px;
  font-size: 22px;
  opacity: .5;
  letter-spacing: 14px;
  white-space: nowrap;
  pointer-events: none;
}

/* Category Quick Launchers */
.ws-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.ws-cat-card {
  position: relative;
  background: #fffefa;
  border: 2px solid #e7e6d8;
  border-radius: 24px;
  padding: 22px 18px 20px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: all .25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-cat-card:hover {
  transform: translateY(-5px);
  border-color: #8db568;
  box-shadow: 0 14px 28px rgba(99, 133, 73, 0.14);
}
.ws-cat-card.active {
  border-color: #628747;
  background: #f4f8ec;
}
.ws-cat-badge {
  font-size: 38px;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
}
.ws-cat-card h3 {
  margin: 0;
  font-size: 19px;
  color: #2e4334;
}
.ws-cat-card p {
  margin: 0;
  font-size: 12px;
  color: #8c9779;
  line-height: 1.5;
}
.ws-cat-plus {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background: #edf2e1;
  border-radius: 50%;
  color: #6d884e;
  font-weight: 900;
  font-size: 18px;
  transition: all .2s;
}
.ws-cat-card:hover .ws-cat-plus {
  background: #628747;
  color: #fff;
  transform: scale(1.1);
}

/* Creations / Gear Shelf */
.ws-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 16px;
}
.ws-section-head h2 {
  font-size: 21px;
  margin: 0;
  color: #274031;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-section-head small {
  color: #8b9979;
  font-size: 12px;
}
.ws-gear-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}
.ws-gear-card {
  position: relative;
  background: #fffefa;
  border: 1px solid #e7e6d8;
  border-radius: 22px;
  padding: 16px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
}
.ws-gear-card:hover {
  transform: translateY(-4px);
  border-color: #9eb87e;
  box-shadow: 0 12px 24px rgba(88, 119, 65, 0.12);
}
.ws-gear-thumb-box {
  width: 100%;
  height: 140px;
  background: var(--gear-tone, #f1f6e9);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ws-gear-thumb-box img {
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.12));
  transition: transform .2s;
}
.ws-gear-card:hover .ws-gear-thumb-box img {
  transform: scale(1.1) rotate(4deg);
}
.ws-gear-type-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 12px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  color: #556c42;
  border: 1px solid rgba(220,230,205,0.6);
}
.ws-gear-magic-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 13px;
}
.ws-gear-title {
  font-size: 16px;
  font-weight: 800;
  margin: 12px 0 4px;
  color: #274031;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-gear-sub {
  font-size: 11px;
  color: #929d81;
}

/* Empty Collection Placeholder */
.ws-empty-shelf {
  border: 2px dashed #dbe3cb;
  background: #f7f9ee;
  border-radius: 26px;
  padding: 55px 20px;
  text-align: center;
  color: #84936d;
  grid-column: 1 / -1;
}
.ws-empty-shelf span {
  font-size: 64px;
  display: block;
  margin-bottom: 12px;
}
.ws-empty-shelf h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: #38503d;
}
.ws-empty-shelf p {
  margin: 0 0 20px;
  font-size: 13px;
}

/* ==========================================================================
   Workshop Wizard (3-Step Guided Creator)
   Step 0: Choose Shape (Icons)
   Step 1: Choose Magic & Palette (Colors & Enchantments)
   Step 2: Name & Forge (Birth of Gear)
   ========================================================================== */
.ws-wizard-layout {
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 36px;
  align-items: start;
}
.ws-stage-box {
  background: var(--ws-tone, #eff4df);
  border: 2px solid #e0ebd0;
  border-radius: 28px;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(80, 115, 60, 0.08);
}
.ws-stage-3d-wrap {
  width: 100%;
  height: 380px;
  position: relative;
}
.ws-stage-surface {
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.ws-stage-surface:active {
  cursor: grabbing;
}
.ws-stage-badge-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  z-index: 2;
}
.ws-stage-note {
  font-size: 11px;
  color: #8c9878;
  margin-top: 8px;
  text-align: center;
}

/* Wizard Options Panel */
.ws-options-panel {
  background: #fffefa;
  border: 1px solid #e6e8d8;
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.03);
}
.ws-options-panel h1 {
  font-size: 28px;
  margin: 0 0 8px;
  color: #274031;
}

/* Shape selection grid */
.ws-shape-selector-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.ws-shape-tab {
  padding: 10px 18px;
  border-radius: 14px;
  background: #f1f4e6;
  border: 1px solid #dfe5d1;
  color: #556c42;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.ws-shape-tab.active {
  background: #628747;
  color: #fff;
  border-color: #4f7336;
}
.ws-shapes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}
.ws-shape-card {
  border: 2px solid #e8ebd9;
  border-radius: 20px;
  background: #fffef8;
  padding: 14px 10px 12px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ws-shape-card:hover {
  transform: translateY(-3px);
  border-color: #94b96b;
  background: #fcfdf7;
}
.ws-shape-card.chosen {
  border-color: #628747 !important;
  background: #f2f7e7 !important;
  box-shadow: 0 6px 16px rgba(98, 135, 71, 0.2);
}
.ws-shape-icon-img {
  width: 58px;
  height: 58px;
  image-rendering: pixelated;
  margin-bottom: 8px;
}
.ws-shape-card b {
  font-size: 13px;
  color: #2e4334;
  margin-bottom: 3px;
}
.ws-shape-card small {
  font-size: 10px;
  color: #8c9779;
}

/* Magic Elements Options */
.ws-magic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.ws-magic-card {
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 16px 12px;
  background: var(--magic-tone, #f0f4e4);
  cursor: pointer;
  text-align: left;
  transition: all .2s;
}
.ws-magic-card:hover {
  transform: translateY(-2px);
  filter: brightness(0.98);
}
.ws-magic-card.chosen {
  border-color: #557c3a !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.ws-magic-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ws-magic-icon {
  font-size: 26px;
}
.ws-magic-card b {
  display: block;
  font-size: 15px;
  color: #274031;
}
.ws-magic-card small {
  display: block;
  font-size: 11px;
  color: #798a65;
  margin-top: 4px;
}

/* Pixel Paint Drawer (Optional Fun for Kids) */
.ws-paint-drawer {
  margin: 18px 0;
  border: 1px solid #e1e7d3;
  border-radius: 20px;
  background: #f9fbf4;
  overflow: hidden;
}
.ws-paint-drawer summary {
  padding: 14px 18px;
  font-weight: 800;
  color: #4a6836;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.ws-paint-body {
  padding: 18px;
  border-top: 1px solid #e5ebd8;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.ws-pixel-canvas {
  width: 140px;
  height: 140px;
  image-rendering: pixelated;
  border: 4px solid #dce5cf;
  border-radius: 12px;
  cursor: crosshair;
  background: #fff;
  touch-action: none;
}
.ws-palette-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 220px;
}
.ws-palette-chip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid #fff;
  outline: 1px solid #d5ddc8;
  cursor: pointer;
}
.ws-palette-chip.active {
  outline: 3px solid #5a823b;
  transform: scale(1.1);
}

/* Step 3: Name & Forge */
.ws-name-wrap {
  margin: 20px 0;
}
.ws-name-input {
  font-size: 24px;
  font-weight: 900;
  border: 2px solid #dce6ca;
  background: #fffef8;
  border-radius: 18px;
  padding: 16px 20px;
  width: 100%;
  color: #263d2e;
  box-sizing: border-box;
}
.ws-name-input:focus {
  border-color: #628747;
  outline: none;
}
.ws-name-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ws-name-chip {
  font-size: 12px;
  background: #f1f4e5;
  border: 1px solid #e0e7d0;
  border-radius: 12px;
  padding: 7px 12px;
  color: #5d7546;
  cursor: pointer;
}
.ws-name-chip:hover {
  background: #628747;
  color: #fff;
}

/* Action Buttons */
.ws-btn-primary {
  min-height: 54px;
  border-radius: 16px;
  background: #628747;
  color: #fffdf2;
  box-shadow: 0 5px 0 #426431;
  font-weight: 900;
  font-size: 17px;
  padding: 14px 26px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s;
}
.ws-btn-primary:hover {
  background: #719b52;
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #426431;
}
.ws-btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #426431;
}
.ws-btn-secondary {
  min-height: 50px;
  border-radius: 16px;
  background: #fffcf4;
  border: 2px solid #dedfcf;
  color: #6b7d52;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s;
}
.ws-btn-secondary:hover {
  background: #f4f6e8;
  border-color: #c8cdb6;
  transform: translateY(-2px);
}

/* ==========================================================================
   Full-Stage Interactive Stage (Like Monster Meadow Buddy Page)
   Steve mannequin standing in stage, interacting with gear.
   ========================================================================== */
.ws-stage-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 36px;
  align-items: center;
}
.ws-main-stage {
  min-height: 520px;
  background: var(--ws-tone, #eff3df);
  border: 2px solid #e1e9d3;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 36px rgba(85, 118, 62, 0.1);
}
.ws-stage-clouds {
  position: absolute;
  top: 40px;
  left: 30px;
  right: 30px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  opacity: .7;
}
.ws-stage-cloud {
  width: 90px;
  height: 26px;
  background: rgba(255,255,255,0.75);
  border-radius: 30px;
  animation: ws-cloud-float 6s ease-in-out infinite alternate;
}
.ws-stage-cloud.two {
  width: 65px;
  animation-duration: 8s;
  animation-delay: -3s;
}
@keyframes ws-cloud-float {
  0% { transform: translateX(0); }
  100% { transform: translateX(18px); }
}

/* Stage Action Controls */
.ws-stage-toolbar {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  display: flex;
  gap: 8px;
}
.ws-tool-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #dce5cf;
  backdrop-filter: blur(8px);
  color: #4b6436;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
.ws-tool-icon-btn:hover {
  background: #628747;
  color: #fff;
  transform: translateY(-2px);
}
.ws-tool-icon-btn.fullscreen-btn {
  font-size: 20px;
  background: #fff;
  color: #274031;
  font-weight: 900;
}

/* Mannequin Interactive Play Buttons */
.ws-play-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.ws-play-action-btn {
  border: 2px solid #e2e6d5;
  background: #fffefa;
  border-radius: 20px;
  padding: 16px 8px;
  font-size: 13px;
  font-weight: 800;
  color: #384e2e;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.ws-play-action-btn:hover {
  border-color: #79a557;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(85, 120, 58, 0.12);
}
.ws-play-action-btn span {
  font-size: 30px;
  display: block;
  margin-bottom: 6px;
}

/* Gear info card & details */
.ws-stage-info {
  display: flex;
  flex-direction: column;
}
.ws-stage-info h1 {
  font-size: 36px;
  margin: 12px 0 6px;
  color: #274031;
}
.ws-stage-info p {
  color: #7f8e6c;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 18px;
}
.ws-gear-magic-box {
  background: #f4f7e9;
  border: 1px solid #e1e9d5;
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 20px;
}
.ws-gear-magic-box b {
  font-size: 15px;
  color: #314b28;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ws-gear-magic-box p {
  margin: 8px 0 0;
  font-size: 12px;
  color: #7b8b68;
  line-height: 1.6;
}

/* Camera Angle Pills */
.ws-cam-pills {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  z-index: 2;
}
.ws-cam-pill {
  padding: 6px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.75);
  border: 1px solid #dce4ce;
  font-size: 11px;
  font-weight: 800;
  color: #597046;
  cursor: pointer;
  transition: all .15s;
}
.ws-cam-pill:hover, .ws-cam-pill.active {
  background: #628747;
  color: #fff;
  border-color: #507435;
}

/* ==========================================================================
   Full-Screen Immersive Arena (Like Monster Meadow, Truly Full Screen)
   ========================================================================== */
.ws-fullscreen-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: radial-gradient(circle at 50% 30%, #e9f2d8, #d3e4bc 75%, #bdd5a1) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 24px 36px !important;
  box-sizing: border-box !important;
  animation: ws-fullscreen-fade-in .3s ease-out;
}
@keyframes ws-fullscreen-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.ws-fullscreen-overlay .ws-fullscreen-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  width: 100%;
}
.ws-fullscreen-overlay .ws-gear-label-badge {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 10px 22px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 900;
  color: #274031;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ws-fullscreen-overlay .ws-close-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d4dec3;
  color: #415535;
  font-size: 28px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: all .2s;
}
.ws-fullscreen-overlay .ws-close-btn:hover {
  background: #e6524b;
  color: #fff;
  border-color: #d13e37;
  transform: rotate(90deg) scale(1.05);
}
.ws-fullscreen-overlay .ws-fullscreen-canvas-area {
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.ws-fullscreen-overlay .ws-fullscreen-bottom-controls {
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
  flex-wrap: wrap;
}
.ws-fullscreen-overlay .ws-fullscreen-bottom-controls button {
  min-height: 52px;
  font-size: 16px;
  border-radius: 18px;
  padding: 12px 24px;
}

/* Particle Effects */
.ws-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  font-size: 28px;
  opacity: 0;
  pointer-events: none;
  animation: ws-particle-pop 1.2s var(--delay, 0s) ease-out forwards;
}
@keyframes ws-particle-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3); }
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .ws-hero { padding: 26px; }
  .ws-hero-copy h1 { font-size: 28px; }
  .ws-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-gear-grid { grid-template-columns: repeat(3, 1fr); }
  .ws-wizard-layout { grid-template-columns: 1fr; }
  .ws-stage-layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .ws-hero { flex-direction: column; text-align: center; padding: 24px 18px; }
  .ws-hero-copy { max-width: 100%; }
  .ws-hero-actions { justify-content: center; }
  .ws-hero-mannequin { width: 180px; height: 180px; margin-top: 10px; }
  .ws-categories-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ws-gear-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ws-shapes-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-magic-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-play-actions { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ws-play-action-btn { padding: 10px 4px; font-size: 11px; }
  .ws-play-action-btn span { font-size: 22px; }
  .ws-fullscreen-overlay { padding: 14px; }
}
/* Pixel painting is the primary workspace. Preview follows the work. */
.ws-wizard-layout:has(#wsLittleCanvas){display:grid;grid-template-columns:minmax(230px,.65fr) minmax(430px,1.5fr);align-items:start}.ws-paint-drawer{border:2px solid #dae5ca!important;background:#fffdf6!important;border-radius:24px;padding:18px;margin:18px 0}.ws-paint-body{display:flex!important;flex-direction:column;align-items:center;gap:18px}.ws-pixel-canvas{width:min(100%,480px)!important;height:auto!important;aspect-ratio:1;image-rendering:pixelated;touch-action:none;border:2px solid #abc38c;background-color:#fff;background-image:conic-gradient(#e9eadf 25%,transparent 0 50%,#e9eadf 0 75%,transparent 0);background-size:24px 24px;border-radius:4px!important}.ws-pixel-canvas.zoomed{width:100%!important;max-width:none!important}.ws-editor-buttons{display:flex;flex-wrap:wrap;gap:8px;width:100%;justify-content:center}.ws-editor-buttons button{min-width:48px;min-height:48px;border:2px solid #d6e0c5;background:#f0f5e4;border-radius:14px;font-size:24px;cursor:pointer}.ws-editor-buttons button.selected,.ws-palette-chip.selected{outline:3px solid #7c9b4e}.ws-editor-full{position:fixed!important;inset:0;z-index:1000;background:#f7faee;padding:24px;overflow:auto;grid-template-columns:minmax(240px,.55fr) minmax(420px,1.5fr)!important;box-sizing:border-box}.ws-editor-full .ws-pixel-canvas{width:min(64vh,650px)!important}.ws-editor-full .ws-options-panel{max-width:none}.ws-editor-full .ws-stage-box{position:sticky;top:0}.ws-editor-full .ws-magic-grid,.ws-editor-full .star-guide{display:none}.ws-editor-full .ws-stage-3d-wrap{height:65vh!important}@media(max-width:760px){.ws-wizard-layout:has(#wsLittleCanvas),.ws-editor-full{grid-template-columns:1fr!important}.ws-wizard-layout:has(#wsLittleCanvas) .ws-options-panel{order:-1}.ws-editor-full .ws-pixel-canvas{width:min(82vw,65vh)!important}.ws-editor-full .ws-stage-3d-wrap{height:280px!important}.ws-editor-full{padding:12px}}
.ws-paint-cameras{display:flex;justify-content:center;gap:8px;padding:10px}.ws-paint-cameras button{min-height:44px;border:1px solid #cfddbd;background:#fffdf5;border-radius:12px;padding:8px 12px;cursor:pointer}.ws-editor-full .ws-options-panel{overflow:visible}.ws-pixel-canvas:focus-visible{outline:4px solid #e2b64f;outline-offset:4px}
body.ws-paint-expanded{overflow:hidden}.ws-editor-full .ws-paint-drawer{margin:0}.ws-editor-full .ws-options-panel{padding:12px}.ws-editor-full #wsEditorFull{position:fixed;top:12px;right:12px;z-index:1002;background:#fff4c7}.ws-editor-buttons input[type=color]{width:48px;height:48px;padding:4px;border:2px solid #d6e0c5;border-radius:14px}.ws-editor-buttons #wsEditorSave{background:#88af61;color:#fff}.ws-editor-full .ws-options-panel>h1{font-size:20px;margin:0 0 10px}
.ws-magic-options{margin:12px 0;padding:12px;border:1px solid #dce5cc;border-radius:16px;background:#fffdf4}.ws-magic-options summary{cursor:pointer;font-weight:700;min-height:32px}.ws-editor-full .ws-magic-options{display:none}.ws-paint-drawer>summary{font-size:17px!important}.ws-palette-chips{justify-content:center}

/* A roomy rainbow without shrinking touch targets. */
.ws-palette-chips{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:7px;max-height:230px;overflow:auto;padding:5px}.ws-palette-chip{width:34px!important;height:34px!important;border:2px solid #ffffff;border-radius:10px;box-shadow:0 0 0 1px #bdc9b4}.ws-palette-chip.selected{outline:3px solid #47772b;outline-offset:1px}