/* ================= ART: paint theme on top of the shared sky/pill base ================= */
@property --mood { syntax: '<color>'; inherits: true; initial-value: #42bbfd; }
:root { --mood: #42bbfd; --btn: #f04438; --btn-dark: #a8231b; --btn-soft: #ffe7e3; --pixel: 'Silkscreen', monospace; --wood: #8b5a2b; --wood-dark: #5e3a17; --lip: #6b3410; }
.mark { -webkit-text-stroke: 7px var(--lip); text-shadow: 0 4px 0 var(--lip); }
.mark img, .empty img { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 0 var(--lip)) drop-shadow(0 10px 12px rgba(107,52,16,.25)); }
.soc.pump { box-shadow: 0 5px 0 #3fa56a, 0 0 0 3px #5fcb88; }
.paint { background: linear-gradient(90deg, #ff5a5a, #ffa53d 22%, #ffd23d 40%, #4cc96b 58%, #3db4ff 76%, #9b6bff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(107,52,16,.18)); }
.doodle { width: 100%; height: 100%; display: block; }
.doodle path { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.doodle.scroll-draw path { stroke-dasharray: 1; stroke-dashoffset: clamp(0, calc(1 - (var(--p, 0) * 1.25 * var(--n) - var(--i))), 1); }
.ex { display: inline-block; font: 700 .7rem var(--pixel); letter-spacing: .08em; background: var(--ink); color: #fff; padding: 3px 8px; border-radius: 6px; }

/* hero */
.hero { min-height: 100vh; overflow: visible; }
.hero > .hero-stroke { overflow: hidden; }
.hero > .hero-stroke { position: absolute; left: 0; right: 0; top: 18%; width: 100%; height: 300px; z-index: 0; pointer-events: none; }
.hero-stroke path { fill: none; stroke: #8fd6ff; stroke-width: 42; stroke-linecap: round; opacity: .5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, .45 + var(--hp, 0) * 1.4)); }
.hero-brush { position: relative; z-index: 1; width: min(320px, 60vw); margin: 4px auto 40px; perspective: 900px; }
.hero-brush img { width: 100%; height: auto; transform: translateY(calc(var(--hp, 0) * 60px)) rotateY(calc(var(--mx, 0) * 22deg)) rotateZ(calc(-8deg + var(--hp, 0) * 40deg)) scale(calc(1 + var(--hp, 0) * .2)); filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(0 10px 0 var(--lip)) drop-shadow(0 30px 30px rgba(107,52,16,.25)); animation: wiggle 4s ease-in-out infinite; }
@keyframes wiggle { 50% { translate: 0 -12px; } }

/* step 1: easel that draws itself as you scroll */
.easel3d { position: relative; flex: none; width: min(400px, 70vw, 50vh); perspective: 1200px; }
.easel-board { position: relative; aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 6%; border: 14px solid var(--wood); box-shadow: 0 10px 0 var(--wood-dark), 0 40px 60px rgba(107,52,16,.25); transform: rotateX(calc(14deg - var(--p, 0) * 14deg)) rotateY(calc(-24deg + var(--p, 0) * 30deg)) rotateZ(-2deg); z-index: 2; }
.easel-legs { position: absolute; left: 12%; right: 12%; bottom: -70px; height: 120px; z-index: 1; background: linear-gradient(75deg, transparent 46%, var(--wood) 46% 52%, transparent 52%), linear-gradient(105deg, transparent 46%, var(--wood) 46% 52%, transparent 52%); }
.tool-chip { position: absolute; left: 50%; bottom: -26px; translate: -50%; white-space: nowrap; font: 700 .8rem var(--pixel); background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 0 #000; }

/* step 2: the canvas flips into a coin */
.flip { flex: none; width: min(360px, 70vw, 48vh); aspect-ratio: 1; perspective: 1400px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(calc(var(--p, 0) * 180deg)); will-change: transform; }
.face { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-items: center; }
.face.front { background: #fff; border: 14px solid var(--wood); border-radius: 18px; padding: 6%; box-shadow: 0 10px 0 var(--wood-dark), 0 40px 60px rgba(107,52,16,.25); }
.face.back { transform: rotateY(180deg); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffc23d 45%, #d99a10); box-shadow: 0 12px 0 #a8730a, 0 0 0 10px #fff, 0 40px 60px rgba(217,154,16,.4); align-content: center; gap: 4px; text-align: center; }
.coin-face { width: 50%; aspect-ratio: 1; border-radius: 50%; background: #fff; padding: 6%; box-shadow: inset 0 0 0 6px #e8b021; }
.face.back b { font: 800 clamp(1.3rem, 3vh, 2rem)/1 var(--display); text-transform: uppercase; color: #6b4200; }
.face.back > span { font: 700 .75rem var(--pixel); color: #7a4c00; }
.on-pump { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 4px 12px 4px 6px; margin-top: 6px; box-shadow: 0 3px 0 #a8730a; }
.on-pump img { transform: rotate(-12deg); }

/* step 3: framed doodles on the ring (placed by JS) */
.frame { --dark: color-mix(in oklab, var(--tier) 55%, #2a1406); position: absolute; left: 50%; top: 0; width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) / -2); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(145deg, #c08a52, var(--wood) 45%, var(--wood-dark)); box-shadow: 0 2px 0 #3b220b, 0 6px 0 #3b220b, 0 10px 0 #3b220b, 0 34px 50px color-mix(in oklab, var(--tier) 40%, transparent), inset 0 0 0 4px rgba(255,255,255,.15); will-change: transform, filter; }
.frame .canvas-in, .wall-frame .canvas-in { flex: 1; min-height: 0; background: #fff; border-radius: 8px; padding: 8%; box-shadow: inset 0 0 0 6px color-mix(in oklab, var(--tier) 35%, #fff); }
.plaque { background: linear-gradient(180deg, #fff3c4, #ffd76a); border-radius: 8px; padding: 10px 12px; text-align: center; box-shadow: 0 3px 0 #a8730a; display: grid; gap: 2px; justify-items: center; }
.plaque b { font: 800 1.25rem/1.05 var(--display); text-transform: uppercase; color: #2c1a00; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.plaque span, .plaque em { font: 800 .95rem var(--display); font-style: normal; color: #5a3500; letter-spacing: .02em; }
.plaque .ex { font: 800 .72rem var(--display); letter-spacing: .1em; background: #fff; color: #2c2a35; border: 2px solid #2c2a35; padding: 1px 8px; }
.verdict { position: absolute; top: -14px; right: -14px; font: 800 1.1rem var(--display); text-transform: uppercase; background: var(--tier); color: #fff; padding: 8px 14px; border-radius: 999px; transform: rotate(10deg); box-shadow: 0 4px 0 var(--dark); }

/* studio */
body[data-scene="studio"] .top-cta { display: none; }
body[data-scene="studio"] .dome { position: fixed; }
.studio { min-height: 100vh; padding: clamp(96px, 12vh, 120px) clamp(16px, 3vw, 40px) 40px; display: grid; gap: 18px; justify-items: center; align-content: start; }
.studio-head { text-align: center; display: grid; gap: 4px; }
.studio-grid { display: grid; grid-template-columns: 96px auto 300px; gap: 26px; align-items: start; }
.tools { display: grid; gap: 10px; }
.tool { width: 96px; padding: 10px 4px; border-radius: 22px; border: 2px solid var(--line); background: var(--paper); cursor: pointer; display: grid; justify-items: center; gap: 2px; box-shadow: 0 5px 0 var(--line); transition: transform .15s var(--ease); color: var(--ink); }
.tool span { font-size: 1.5rem; line-height: 1.1; } .tool small { font: 700 .62rem var(--pixel); text-transform: uppercase; }
.tool:hover { transform: translateY(-2px); } .tool:active { transform: translateY(3px); }
.tool.on { border-color: var(--btn); background: var(--btn); color: #fff; box-shadow: 0 5px 0 var(--btn-dark); }
.easel { display: grid; justify-items: center; gap: 10px; }
.easel-frame { padding: 14px; border-radius: 22px; background: linear-gradient(145deg, #c08a52, var(--wood) 45%, var(--wood-dark)); box-shadow: 0 10px 0 #3b220b, 0 40px 60px rgba(107,52,16,.25); }
#cv { display: block; width: min(560px, 62vh, 86vw); height: auto; aspect-ratio: 1; border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.side { display: grid; gap: 16px; }
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; background: var(--paper); padding: 14px; border-radius: 24px; box-shadow: 0 6px 0 var(--line); }
.sw { aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--line), 0 3px 0 rgba(0,0,0,.15); transition: transform .15s var(--ease); padding: 0; }
.sw:hover { transform: scale(1.1); } .sw.on { box-shadow: 0 0 0 3px var(--ink), 0 3px 0 rgba(0,0,0,.15); transform: scale(1.12); }
.sw.custom { background: conic-gradient(#ff5a5a, #ffd23d, #4cc96b, #3db4ff, #9b6bff, #ff5a5a); position: relative; overflow: hidden; display: block; }
.sw.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.size { display: grid; justify-items: center; align-content: end; gap: 4px; min-height: 64px; padding: 8px 0; border-radius: 18px; border: 2px solid var(--line); background: var(--paper); cursor: pointer; font: 700 .7rem var(--pixel); box-shadow: 0 4px 0 var(--line); color: var(--ink); }
.size i { width: var(--s); height: var(--s); border-radius: 50%; background: var(--ink); }
.size.on { border-color: var(--ink); background: #fff3c4; }
.row.tight { gap: 8px; margin: 0; justify-content: flex-start; } .row.tight .pill { padding: 0 14px; }
.side > .pill.primary { width: 100%; font-size: 1.1rem; padding: 0 18px; }
.row.tight .pill { font-size: .85rem; }

/* gallery wall */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 22px; }
.wall > .empty, .wall > .fine { grid-column: 1 / -1; }
.wall-frame { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 18px; text-decoration: none; background: linear-gradient(145deg, #c08a52, var(--wood) 45%, var(--wood-dark)); box-shadow: 0 6px 0 #3b220b, 0 22px 40px rgba(107,52,16,.18); transition: transform .25s var(--ease); --tier: #ffd23d; }
.wall-frame:hover { transform: translateY(-6px) rotate(-1.2deg); }
.wall-frame .canvas-in { padding: 0; overflow: hidden; aspect-ratio: 1; flex: none; }
.wall-frame .canvas-in img { width: 100%; height: 100%; object-fit: cover; }
.wall-frame.big { max-width: 440px; margin: 0 auto; } .wall-frame.big:hover { transform: none; }
.rank { position: absolute; top: -12px; left: -10px; z-index: 2; font: 700 1rem var(--pixel); background: var(--btn); color: #fff; padding: 6px 10px; border-radius: 12px; box-shadow: 0 4px 0 var(--btn-dark); transform: rotate(-8deg); }
.spot { position: relative; padding: 20px 0; } .spot::before { content: ''; position: absolute; inset: -20px 10% auto; height: 70%; background: radial-gradient(ellipse at top, rgba(255,230,140,.55), transparent 70%); pointer-events: none; }
.verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.verdicts div { background: var(--cream); border-radius: 18px; padding: 14px; display: grid; gap: 4px; }
.verdicts b { font: 800 1.6rem/1 var(--display); } .verdicts span { font: 700 .66rem var(--pixel); color: var(--muted); text-transform: uppercase; }
.canvas-card { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; }
.mini-easel { display: block; width: 170px; aspect-ratio: 1; border-radius: 14px; border: 10px solid var(--wood); background: #fff; box-shadow: 0 6px 0 #3b220b; overflow: hidden; text-decoration: none; transform: rotate(-3deg); }
.mini-easel img { width: 100%; height: 100%; object-fit: cover; } .mini-easel.blank { display: grid; place-items: center; text-align: center; font: 700 .8rem var(--pixel); color: var(--muted); }
.podium { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.podium li { display: grid; grid-template-columns: 40px 48px 1fr auto; gap: 12px; align-items: center; background: var(--cream); border-radius: 16px; padding: 8px 12px; }
.podium li span { font: 700 1rem var(--pixel); color: var(--btn); } .podium img { border-radius: 10px; width: 48px; height: 48px; object-fit: cover; }
.podium a { font: 800 1.1rem var(--display); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .podium b { font: 800 1.1rem var(--display); }

@media (max-width: 900px) {
  .studio-grid { grid-template-columns: 1fr; justify-items: center; width: 100%; }
  .tools { grid-template-columns: repeat(6, 1fr); width: 100%; max-width: 560px; order: 2; }
  .tool { width: auto; padding: 8px 2px; } .tool small { font-size: .5rem; }
  .easel { order: 1; } .side { order: 3; width: 100%; max-width: 560px; }
  .palette { grid-template-columns: repeat(7, 1fr); }
  #cv { width: min(86vw, 520px); }
  .canvas-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .verdicts b { font-size: 1.2rem; }
  .wall { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}
@media (max-width: 900px) { .studio { padding-top: 112px; } body[data-scene="studio"] .top { background: linear-gradient(180deg, var(--mood) 0, color-mix(in oklab, var(--mood) 60%, transparent) 70%, transparent); padding-bottom: 18px; } }