.sticker-themes { max-width: 1030px; margin: auto; }
.sticker-theme-grid { margin: 18px 0; }

.cake-player {
  max-width: 650px;
  margin: auto;
  --cake-ink: #433b2a;
}

body:has(.cake-player) .topbar { padding-block: 7px; }
.cake-player .creative-heading { margin-bottom: 10px; }
.cake-player .creative-heading .capsule { min-height: 44px; }
.cake-layout { display:grid; gap:10px; }
.cake-canvas { position:relative; isolation:isolate; width:min(100%, max(180px, calc(100dvh - 295px))); margin-inline:auto; aspect-ratio:1; border-radius:22px; background:#e9e3bf; box-shadow:0 0 0 3px #fffdf4, var(--shadow); color:var(--cake-ink); }
.cake-background { display:block; width:100%; height:100%; border-radius:inherit; pointer-events:none; user-select:none; }
.cake-canvas button { -webkit-tap-highlight-color:transparent; }
.cake-layer { position:absolute; inset:0; z-index:2; pointer-events:none; }
.cake-piece, .cake-ghost { transform:translate(-50%,-93%); padding:0; user-select:none; }
.cake-piece { position:absolute; background:transparent; touch-action:none; pointer-events:auto; border-radius:12px; }
.cake-piece img { display:block; width:100%; pointer-events:none; filter:drop-shadow(0 2px 2px #58381442); }
.cake-piece:has(.cake-flame)::after { content:''; position:absolute; inset:-3px -10px; }
.cake-piece.selected { outline:2px dashed #ac713c; outline-offset:4px; }
.cake-piece.moving { opacity:0; }
.cake-player[data-workshop=ocean] .cake-piece[data-kind=prop-1] img,
.cake-player[data-workshop=ocean] .cake-piece[data-kind=prop-2] img,
.cake-player[data-workshop=ocean] .cake-piece[data-kind=prop-3] img { animation:sticker-swim 4s ease-in-out infinite alternate; }
@keyframes sticker-swim { to { transform:translate(10%, -8%) rotate(-3deg); } }
.cake-canvas.lamp-on .cake-piece[data-kind=prop-5] img { filter:drop-shadow(0 -7px 14px #ffc756) drop-shadow(0 0 12px #ffdf88); }
.cake-piece:disabled { cursor:default; pointer-events:none; }
.cake-ghost { position:fixed; z-index:1000; pointer-events:none; opacity:.9; }
.cake-flame { display:none; position:absolute; bottom:94%; left:50%; width:56%; aspect-ratio:.63; border-radius:55% 45% 55% 55%; background:radial-gradient(ellipse at 50% 76%,#fffcd0 4% 18%,#ffd255 47%,#ec7330 84%); box-shadow:0 0 12px #ffbb42; transform:translateX(-50%); transform-origin:50% 100%; }
.cake-canvas.lit .cake-flame { display:block; animation:cake-flicker .8s ease-in-out infinite alternate; }
@keyframes cake-flicker { to { transform:translateX(-50%) scale(.84,1.14) rotate(6deg); } }

.cake-tools { padding:12px; border:2px solid white; border-radius:18px; background:#fffaf0; box-shadow:var(--shadow); }
.cake-status { margin:0 0 10px; color:#695c42; font-weight:700; font-size:14px; }
.cake-basket { display:grid; grid-template-columns:28px minmax(0,1fr) 28px; align-items:center; gap:4px; padding:4px; border-radius:14px; background:#efe0c6; }
.cake-basket-arrow { width:28px; height:44px; border-radius:9px; padding:0; background:#fff7e5; color:var(--cake-ink); font-size:22px; }
.cake-basket-arrow:disabled { opacity:.35; cursor:default; }
.cake-palette { display:flex; gap:6px; overflow-x:auto; margin:0; padding:2px 3px 4px; list-style:none; overscroll-behavior-inline:contain; scrollbar-width:thin; touch-action:none; }
.cake-palette li { flex:0 0 89px; min-height:61px; padding:3px; display:grid; justify-items:center; align-content:center; gap:2px; border:1px solid #fff3de; border-radius:10px; background:#fff9eb; color:var(--cake-ink); touch-action:none; cursor:grab; user-select:none; }
.cake-palette li:active { cursor:grabbing; }
.cake-palette img { display:block; width:38px; height:38px; object-fit:contain; pointer-events:none; }
.cake-palette span { font-size:12px; font-weight:750; white-space:nowrap; pointer-events:none; }
.cake-actions { display:flex; gap:5px; margin-top:8px; }
.cake-actions .capsule, .cake-preview .capsule { min-height:44px; padding:0 8px; font-size:13px; }
.cake-actions .capsule { flex:1; min-width:0; white-space:nowrap; }
.cake-actions .capsule span { font-size:1.2em; }
.cake-actions .capsule:disabled { opacity:.45; }
.cake-preview { text-align:center; }

@media (max-width:700px) and (orientation:portrait) {
  .cake-player { max-width:500px; }
  .cake-tools { padding:8px; }
  .cake-status { font-size:12px; margin-bottom:5px; }
  .cake-palette li { flex-basis:60px; min-height:53px; }
  .cake-palette img { width:28px; height:28px; }
  .cake-palette span { font-size:10px; }
  .cake-actions { margin-top:5px; }
  .cake-actions .capsule { font-size:11px; padding:0 2px; }
}

@media (max-height:580px) and (orientation:landscape) {
  body:has(.cake-player) .topbar { display:none; }
  .cake-player { max-width:min(100%,520px); }
  .cake-canvas { width:min(100%,max(150px,calc(100dvh - 192px))); }
  .cake-player .creative-heading .capsule { min-height:36px; }
  .cake-tools { padding:8px; }
  .cake-palette li { min-height:49px; }
  .cake-palette img { width:29px; height:29px; }
}