/* A small craft table, using the same bottles, dishes and surfaces as the app. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body{background-image:linear-gradient(#fdfaf7ed,#fdfaf7ed),url('assets/table-paper.webp');background-size:auto,600px}
.mix{padding:66px 0 64px;background:linear-gradient(#faf6ffef,#f4edffed),url('assets/table-paper.webp') center/600px;overflow:hidden}
.mix .section-head{margin-bottom:32px}
.mix .section-head p{margin-top:12px}
.craft-bench{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.craft-preview{min-width:0}
.playmat{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.13;border:7px solid #fff9;border-radius:42px;box-shadow:0 12px 28px #46335010;background:#f4f0e9}
.table-surface{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
.table-surface.is-current{opacity:1}
.craft-topline{position:absolute;z-index:3;top:14px;left:21px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.craft-topline>span{font:600 19px Fredoka;color:#54425c;background:#fff9;padding:5px 13px;border-radius:30px}
.craft-reset{border:0;border-radius:50%;background:#fffbea;width:44px;height:44px;font:29px/1 system-ui;box-shadow:0 3px 8px #38284610;transition:transform .2s}
.craft-reset:hover{transform:rotate(-15deg)}
.slime-object{position:absolute;width:91%;aspect-ratio:1;left:4.5%;top:2%;filter:drop-shadow(0 13px 8px #38284618)}
.preview-slime{width:100%;height:100%;object-fit:contain;filter:url("#craft-slime-color")}
.slime-decor{position:absolute;inset:0;pointer-events:none}
.placed-charm{position:absolute;width:17%;height:auto;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--turn));filter:drop-shadow(0 3px 2px #38284635);animation:charm-arrive .4s cubic-bezier(.2,.8,.3,1)}
.mix-layer{position:absolute;inset:0;mask:url('assets/glossy-studio.png') center/contain no-repeat;-webkit-mask:url('assets/glossy-studio.png') center/contain no-repeat}
.mix-particle{position:absolute;left:var(--x);top:var(--y);background:var(--particle-color);transform:rotate(var(--turn));animation:charm-arrive .3s ease-out}
.mix-particle.glitter{width:4px;height:4px;box-shadow:0 0 2px #fff9}
.mix-particle.beads{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 2%,var(--particle-color) 60%,#7e649d);box-shadow:0 2px 2px #38284624}
.mix-particle.sprinkles{width:4px;height:11px;border-radius:3px;box-shadow:0 1px 1px #38284630}
.craft-feedback{position:absolute;z-index:3;bottom:17px;left:12px;right:12px;text-align:center;min-height:26px;pointer-events:none}
.craft-feedback>span{display:inline-block;font:600 17px Fredoka;padding:5px 14px;border-radius:30px;background:#fff9;color:#59465f}
.surface-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:17px 6px 0}
.surface-choice{background:transparent;border:0;padding:0 4px 6px;min-height:95px;font:600 15px Fredoka;border-radius:16px;color:#76667f}
.surface-sample{display:block;width:100%;height:62px;max-width:110px;margin:0 auto 8px;border:3px solid #fffffff2;border-radius:16px;background-size:cover;background-position:center;transform:perspective(250px) rotateX(23deg);box-shadow:0 7px 9px #69567d24;transition:transform .2s,box-shadow .2s}
.surface-choice:hover .surface-sample{transform:perspective(250px) rotateX(12deg) translateY(-3px)}
.surface-choice[aria-pressed=true]{color:#c9437a}
.surface-choice[aria-pressed=true] .surface-sample{box-shadow:0 0 0 3px #f26b9d,0 7px 12px #cb7da735}
.craft-caption{font-size:11px;color:var(--soft);text-align:center;margin-top:12px}
.craft-drawer{min-width:0;border-radius:38px;padding:22px 20px 24px;background:linear-gradient(165deg,#fffefd,#f0e8fa);box-shadow:inset 0 1px 0 #fff,0 12px 0 #e6dbf17d}
.craft-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:19px}
.craft-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-height:51px;border:0;padding:8px 14px;background:#ece5f5;border-radius:30px;font:600 17px Fredoka;color:#766185;transition:background .2s,box-shadow .2s}
.craft-tab img{width:31px;height:31px;object-fit:contain}
.craft-tab[aria-selected=true]{color:#fff;background:linear-gradient(#ff8fb5,#f45488);box-shadow:0 7px 14px #e95a8825}
.shelf-panel{min-height:432px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.shelf-panel[hidden]{display:none}
.shelf-row{position:relative;display:grid;grid-template-columns:repeat(var(--columns,4),minmax(0,1fr));gap:4px;padding:0 2px}
.shelf-row:before{content:'';position:absolute;bottom:28px;left:0;right:0;height:16px;border-radius:16px;background:linear-gradient(#fff,#e5daf2);box-shadow:0 7px 8px #68517e20}
.craft-item{min-width:0;position:relative;z-index:1;background:transparent;border:0;border-radius:18px;padding:2px 2px 8px;color:#716177;font:600 15px/1.25 Fredoka}
.craft-item:after{content:'';position:absolute;left:calc(50% - 3px);bottom:0;width:6px;height:6px;border-radius:50%;background:#f25c92;opacity:0}
.craft-item[aria-pressed=true]{color:#d33f7b}
.craft-item[aria-pressed=true]:after{opacity:1}
.craft-item>span:last-child{display:block;white-space:nowrap}
.bottle-art{width:112px;height:112px;max-width:100%;object-fit:contain;margin:0 auto 2px;transform-origin:50% 85%;transition:transform .22s}
.craft-item:hover .bottle-art{transform:translateY(-5px) rotate(-5deg)}
.craft-item.pouring .bottle-art{animation:bottle-tip .48s cubic-bezier(.2,.8,.3,1)}
.charm-dish{display:block;width:150px;max-width:100%;aspect-ratio:1;position:relative;margin:0 auto 2px;transition:transform .22s}
.charm-dish>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.charm-dish>.dish-charm{width:54%;height:54%;left:23%;top:22%;filter:drop-shadow(0 2px 2px #3d295938)}
.craft-item:hover .charm-dish{transform:translateY(-4px) rotate(-3deg)}
.craft-item[aria-pressed=true] .charm-dish{filter:drop-shadow(0 2px 4px #ef82ae50)}
.mixin-art{width:160px;max-width:100%;aspect-ratio:1;object-fit:contain;margin:0 auto 2px;transition:transform .2s}
.craft-item:hover .mixin-art{transform:translateY(-5px)}
.craft-item.shaking .mixin-art{animation:shake .6s ease-in-out}
.mix-hint{font:600 23px Fredoka;text-align:center;color:#9579a4;margin:28px 0 0}
@keyframes bottle-tip{0%,100%{transform:none}35%{transform:translateY(-6px) rotate(-14deg)}70%{transform:translateY(-3px) rotate(5deg)}}
@keyframes charm-arrive{from{opacity:0;scale:.75}to{opacity:1;scale:1}}
@media(max-width:1100px){.craft-bench{gap:22px}.craft-drawer{padding:20px 12px}.craft-tab{padding:8px 10px;font-size:16px;gap:4px}.craft-tab img{width:25px;height:25px}.bottle-art{height:100px}.shelf-panel{min-height:399px}.craft-item{font-size:14px}.playmat{aspect-ratio:1.02}.surface-picker{gap:7px}.surface-choice{font-size:14px}}
@media(max-width:800px){.craft-bench{grid-template-columns:1fr;gap:27px;max-width:600px;margin:auto}.playmat{aspect-ratio:1.25}.slime-object{width:76%;left:12%;top:-4%}.craft-drawer{padding:22px 22px 26px}.bottle-art{height:116px}.shelf-panel{min-height:444px}.craft-item{font-size:16px}.craft-tabs{gap:10px}.craft-tab{padding:8px 16px}.surface-sample{height:64px}.surface-picker{margin-top:18px}.craft-caption{margin-top:8px}}
@media(max-width:600px){.mix{padding:44px 0 45px}.mix .section-head{margin-bottom:25px}.craft-bench{gap:24px}.playmat{border-width:5px;border-radius:30px;aspect-ratio:1.08}.slime-object{width:93%;left:3.5%;top:0}.craft-topline{top:10px;left:12px;right:10px}.craft-topline>span{font-size:16px}.craft-reset{width:40px;height:40px;font-size:26px}.craft-feedback{bottom:10px}.craft-feedback>span{font-size:15px}.surface-picker{gap:4px;margin:13px 0 0}.surface-sample{height:49px;border-radius:12px;margin-bottom:5px}.surface-choice{min-height:76px;padding:0 4px 4px;font-size:13px}.craft-drawer{border-radius:29px;padding:17px 8px 21px}.craft-tabs{gap:5px;margin-bottom:14px}.craft-tab{font-size:15px;padding:8px 10px;gap:3px;min-height:48px}.craft-tab img{width:23px;height:23px}.shelf-panel{min-height:350px;gap:5px}.shelf-row{gap:0}.shelf-row:before{height:13px;bottom:24px}.craft-item{font-size:12px;padding-bottom:8px}.bottle-art{height:86px}.charm-dish{max-width:100%;width:124px}.mix-hint{font-size:21px;margin-top:20px}.mix-particle.beads{width:7px;height:7px}.mix-particle.sprinkles{width:3px;height:8px}}
@media(prefers-reduced-motion:reduce){.craft-reset:hover,.craft-item:hover .bottle-art,.craft-item:hover .charm-dish,.craft-item:hover .mixin-art{transform:none}.surface-choice:hover .surface-sample{transform:perspective(250px) rotateX(23deg)}}
@media(max-width:600px){.playmat{aspect-ratio:1.4}.slime-object{width:77%;left:11.5%;top:-8%}.shelf-panel{min-height:0;height:260px;overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;padding-bottom:8px}.shelf-row{flex-shrink:0}#mixins-panel{justify-content:center}}