/* Cake Studio (#/studio): the colour card becomes play. Built only from tokens.css. */

main > section.studio:first-child { padding-top: clamp(96px, 9vw, 124px); }
.studio { position: relative; isolation: isolate; overflow: clip; padding: clamp(28px, 4vw, 56px) var(--gut) clamp(56px, 7vw, 96px); transition: color .6s var(--ease); }
.studio-flood { position: absolute; inset: 0; z-index: -1; background: var(--c, var(--field)); clip-path: circle(0 at var(--x, 50%) var(--y, 30%)); pointer-events: none; }
.studio-flood.go { clip-path: circle(145% at var(--x) var(--y)); transition: clip-path .85s var(--ease-io); }
.studio-in { max-width: var(--maxw); margin-inline: auto; }

.studio-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px clamp(20px, 4vw, 56px); margin-bottom: clamp(20px, 3vw, 36px); }
.studio-head h1 { font-size: clamp(3rem, 8vw, 7.4rem); }
.studio-head .lede { margin: 0; padding-bottom: .4em; }

.studio-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: start; }

/* the stage: a white sample card holding the live cake */
.studio-stage { position: sticky; top: 92px; display: grid; background: var(--paper); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; transition: background-color .6s var(--ease), color .6s var(--ease); }
.studio-tools { display: flex; align-items: center; gap: 8px; padding: 14px 14px 0; }
.studio-surprise { margin-inline-start: auto; min-height: 56px; padding: 0 22px; }
.studio-canvas { display: block; height: min(56vh, 560px); min-height: 280px; padding: 0 clamp(8px, 2vw, 24px); touch-action: manipulation; }
.studio-canvas svg { display: block; width: 100%; height: 100%; overflow: visible; }
.studio-wishfab[hidden] { display: none; }
.studio-wishfab { justify-self: center; margin: -6px 0 12px; min-height: 52px; }
.studio-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.studio-band ul { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.studio-band li { display: flex; align-items: center; gap: 10px; }
.studio-band li > i { width: 24px; height: 30px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px var(--line); }
.studio-band li > span { display: grid; gap: 3px; }
.studio-band b { font: 600 14px/1.15 var(--f-body); }
.studio-band li .code { color: var(--ink-2); }

/* round icon buttons: undo, reset, sound, candles */
.studio-ib { display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: transform .45s var(--spring), background-color .3s, color .3s; }
.studio-ib:hover { background: var(--pearl); }
.studio-ib:active { transform: scale(.92); }
.studio-ib[aria-pressed="true"], .studio-ib-ink, .studio-ib-ink:hover { background: var(--ink); color: var(--pearl); box-shadow: none; }
.studio-ib:disabled { opacity: .3; cursor: default; transform: none; }

/* the controls sit on the field; every option is a white card */
.studio-panel { display: grid; gap: 16px; min-width: 0; }
.studio-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px; padding: 4px; }
.studio-steps::-webkit-scrollbar { display: none; }
.studio-step { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: transparent; color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor; font: 600 15px/1 var(--f-body); cursor: pointer; transition: background-color .3s, color .3s; }
.studio-step .num { font-size: 12px; opacity: .65; }
.studio-step[aria-current] { background: var(--ink); color: var(--pearl); box-shadow: none; }
.studio-body { display: grid; gap: 12px; min-width: 0; }
.studio-q { margin: 8px 0 0; font: 600 clamp(1.1rem, 1.5vw, 1.3rem)/1.25 var(--f-display); letter-spacing: -.01em; }
html:lang(ar) .studio-q { letter-spacing: 0; }
.studio-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.studio-opt { display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 56px; padding: 10px 8px 12px; border: 0; border-radius: var(--r-chip);
  background: var(--paper); color: var(--ink); box-shadow: var(--sh-card); font: 600 13px/1.2 var(--f-body); text-align: center; cursor: pointer;
  transition: transform .5s var(--spring), box-shadow .35s var(--ease); }
.studio-opt svg { width: 100%; height: 78px; }
.studio-opt:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.studio-opt:active { transform: scale(.96); }
.studio-opt[aria-pressed="true"] { transform: translateY(-6px); box-shadow: var(--sh-lift), 0 0 0 2.5px var(--ink); }
.studio-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 14px; }
.studio-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-tierbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding-block: 0; padding-inline: 12px 20px; border: 0; border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink); box-shadow: var(--sh-card); font: 600 14px/1 var(--f-body); cursor: pointer; transition: background-color .3s, color .3s; }
.studio-tierbtn svg { width: 40px; height: 34px; }
.studio-tierbtn[aria-pressed="true"] { background: var(--ink); color: var(--pearl); }

.studio-input { width: 100%; min-height: 60px; padding: 0 20px; border: 0; border-radius: var(--r-chip); background: var(--paper); color: var(--ink); box-shadow: var(--sh-card); font: 600 20px/1 var(--f-body); }
.studio-input::placeholder { color: var(--ink-2); opacity: .7; }
.studio-hint { margin: 0; font-size: 14px; line-height: 1.5; opacity: .82; max-width: 38em; }
.studio-stepper { display: flex; align-items: center; gap: 18px; }
.studio-stepper output { min-width: 1.4ch; font-size: 44px; line-height: 1; font-weight: 500; text-align: center; }
.studio-switch { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: 600 15px/1.2 var(--f-body); cursor: pointer; }
.studio-knob { position: relative; flex: none; width: 54px; height: 32px; border-radius: var(--r-pill); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .3s; }
.studio-knob::after { content: ''; position: absolute; top: 5px; inset-inline-start: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-2); transition: inset-inline-start .4s var(--ease), background-color .3s; }
.studio-switch[aria-pressed="true"] .studio-knob { background: var(--ink); }
.studio-switch[aria-pressed="true"] .studio-knob::after { inset-inline-start: 27px; background: var(--pearl); }
.studio-switch:disabled { opacity: .45; cursor: default; }
.studio-wishgo { justify-self: start; margin-top: 6px; min-height: 56px; }
.studio-nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; }
.studio-nav .btn { min-height: 56px; }

/* make a wish: the lights go down */
.studio.is-wish .studio-stage { background: var(--ink); color: var(--pearl); }
.studio.is-wish .studio-tools, .studio.is-wish .studio-wishfab { visibility: hidden; }
.studio.is-wish .studio-band { border-color: rgba(242, 240, 241, .16); }
.studio.is-wish .studio-band li .code { color: rgba(242, 240, 241, .7); }
.studio.is-wish .studio-candle { cursor: pointer; outline: none; }
.studio.is-wish .studio-candle:focus-visible rect { stroke: #fff; stroke-width: 2.5; }
.studio-wishp .btn-line { justify-self: start; min-height: 56px; }
.studio-wishp .lede { margin: 0; }

.studio-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(24px, 3vw, 40px); }
.studio-actions .btn { min-height: 56px; }
.studio-send { padding: 0 32px; font-size: 16px; }
.studio-actions .link { margin-inline-start: 8px; min-height: 56px; }

.studio-mine { margin-top: clamp(40px, 6vw, 72px); }
.studio-h { margin: 0 0 16px; font: 600 clamp(1.6rem, 3vw, 2.4rem)/1.05 var(--f-display); letter-spacing: -.02em; }
html:lang(ar) .studio-h { letter-spacing: 0; line-height: 1.3; }
.studio-mine-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.studio-saved { position: relative; }
.studio-saved-open { display: grid; gap: 6px; width: 100%; padding: 10px 10px 12px; border: 0; border-radius: var(--r-chip); background: var(--paper); color: var(--ink); box-shadow: var(--sh-card);
  text-align: start; cursor: pointer; transition: transform .5s var(--spring), box-shadow .35s var(--ease); }
.studio-saved-open:hover { transform: translateY(-5px); box-shadow: var(--sh-lift); }
.studio-thumb { width: 100%; height: auto; aspect-ratio: 5 / 6; }
.studio-del { position: absolute; top: 6px; inset-inline-end: 6px; width: 48px; height: 48px; }

.studio-toast { position: fixed; z-index: var(--z-fx); inset-inline: 0; bottom: 24px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 14px 22px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--pearl); font: 600 15px/1.35 var(--f-body); box-shadow: var(--sh-lift); overflow-wrap: anywhere; pointer-events: none;
  opacity: 0; transform: translateY(16px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.studio-toast.on { opacity: 1; transform: none; }

/* the cake moves: tiers drop and squash, toppers land, flames flicker */
.studio-tier, .studio-topper, .studio-candle, .studio-flame, .studio-flap, .studio-smoke { transform-box: fill-box; }
.studio-land { transform-origin: 50% 100%; animation: studio-land .9s var(--ease) both; }
@keyframes studio-land {
  0% { transform: translateY(-170px); opacity: 0; }
  55% { transform: translateY(0) scale(1.05, .92); opacity: 1; animation-timing-function: var(--ease-io); }
  100% { transform: none; }
}
.studio-paint { transform-origin: 50% 100%; animation: studio-paint .55s var(--ease-io); }
@keyframes studio-paint { 35% { transform: scale(1.025, .96); } }
.studio-pop { transform-origin: 50% 100%; animation: studio-pop .75s var(--ease) both; }
@keyframes studio-pop {
  0% { transform: translateY(-56px) scale(.6); opacity: 0; }
  60% { transform: translateY(0) scale(1.08, .9); opacity: 1; animation-timing-function: var(--ease-io); }
  100% { transform: none; }
}
.studio-flame { transform-origin: 50% 100%; animation: studio-flicker 1.3s ease-in-out infinite alternate; transition: opacity .3s, transform .3s; }
@keyframes studio-flicker {
  0% { transform: none; }
  25% { transform: scale(.93, 1.08) skewX(3deg); }
  50% { transform: scale(1.05, .95) skewX(-2deg); }
  75% { transform: scale(.97, 1.05) skewX(1deg); }
  100% { transform: scale(1.02, .98) skewX(-1deg); }
}
.studio-candle.is-out .studio-flame { animation: none; transform: scale(.1); opacity: 0; }
.studio-candle.is-out .studio-smoke { animation: studio-smoke 1.6s var(--ease) forwards; }
@keyframes studio-smoke { 0% { opacity: .8; transform: none; } 100% { opacity: 0; transform: translateY(-22px); } }
.studio-flap { transform-origin: 50% 50%; animation: studio-flap 1.8s ease-in-out infinite; }
@keyframes studio-flap { 50% { transform: scaleX(.55); } }
.studio-shuffle svg { transform-origin: 50% 90%; animation: studio-wobble .17s ease-in-out infinite alternate; }
@keyframes studio-wobble { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.studio-sprinkle { position: fixed; z-index: var(--z-fx); width: 4px; height: 11px; margin: -5px 0 0 -2px; border-radius: 2px; pointer-events: none; animation: studio-sprinkle .9s var(--ease) forwards; }
@keyframes studio-sprinkle { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

@media (max-width: 900px) {
  .studio-head { grid-template-columns: minmax(0, 1fr); }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-stage { top: 72px; z-index: 2; box-shadow: 0 0 0 var(--gut) var(--field), var(--sh-lift); } /* the ring hides options scrolling under the stuck stage */
  .studio-canvas { height: 32vh; min-height: 220px; padding-bottom: 8px; }
  .studio-band { display: none; }
  .studio-wishfab { position: absolute; bottom: 12px; inset-inline: 0; width: max-content; margin: auto; }
}
@media (max-width: 600px) {
  .studio-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .studio-tools { padding: 10px 10px 0; gap: 6px; }
  .studio-surprise { padding: 0 18px; }
  .studio-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .studio-opt svg { height: 64px; }
  .studio-chips { gap: 8px; }
  .studio-chip > span { padding: 7px 7px 8px; }
  .studio-chip b { font-size: 12px; }
  .studio-actions .btn { flex: 1 1 100%; }
  .studio-mine-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}