.builder-page { background: radial-gradient(circle at 50% 10%, rgba(105,214,196,.13), transparent 30%), linear-gradient(180deg,#111a36 0%,#0c1227 78%); }
.workshop-note { padding: 7px 12px; border: 1px solid rgba(246,212,123,.3); border-radius: 99px; color: var(--gold); background: rgba(67,50,83,.45); font-size: .78rem; font-weight: 900; }
.builder-hero { padding: 27px 20px 17px; text-align: center; }
.builder-hero h1 { margin: 0; font-size: clamp(3.4rem,6.6vw,4.75rem); line-height: .88; }
.builder-hero h1 span { color: var(--gold); }
.builder-hero > p:last-child { max-width: 590px; margin: 10px auto 0; color: var(--muted); line-height: 1.55; }
.builder-shell { width: min(1110px,calc(100% - 28px)); min-height: 650px; margin: 7px auto 70px; display: grid; grid-template-columns: minmax(390px,.92fr) minmax(450px,1.08fr); overflow: hidden; border: 1px solid rgba(203,186,245,.24); border-radius: 32px; background: rgba(22,29,56,.9); box-shadow: 0 32px 90px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05); }
.troll-preview-panel { padding: 22px 30px 28px; position: relative; display: flex; flex-direction: column; align-items: center; border-right: 1px solid rgba(203,186,245,.16); background: radial-gradient(circle at 50% 27%,rgba(105,214,196,.13),transparent 35%),linear-gradient(160deg,rgba(10,27,44,.98),rgba(35,23,57,.97)); }
.troll-preview-panel::before { content:""; width:180px; height:180px; position:absolute; left:-100px; bottom:80px; border-radius:45% 55% 0 0; background:#071426; opacity:.55; transform:rotate(8deg); }
.troll-preview-panel::after { content:""; width:170px; height:220px; position:absolute; right:-120px; top:180px; border-radius:50% 45% 0 0; background:#10142b; opacity:.55; transform:rotate(-12deg); }
.preview-stars { width: 100%; display: flex; justify-content: space-between; color: rgba(246,212,123,.55); font-size: 1.25rem; }
.preview-label { margin: 2px 0 5px; color: var(--mint); font-size: .67rem; font-weight: 900; letter-spacing: .18em; }
.troll-stage { width: 100%; height: 340px; position: relative; z-index:1; display: grid; place-items: center; overflow:hidden; border:1px solid rgba(105,214,196,.1); border-radius:26px; background:radial-gradient(circle at 50% 25%,rgba(246,212,123,.13) 0 7%,transparent 23%),radial-gradient(circle at 50% 45%,rgba(105,214,196,.12),transparent 42%),linear-gradient(180deg,rgba(12,24,48,.2),rgba(7,16,33,.66)); box-shadow:inset 0 -40px 80px rgba(0,0,0,.2); }
.troll-stage::before { content:""; width:78px; height:78px; position:absolute; right:18px; top:23px; border:1px solid rgba(246,212,123,.34); border-radius:50%; background:radial-gradient(circle at 36% 33%,#fff2be 0 5%,#f6d47b 7% 50%,#d9a858 53% 100%); box-shadow:0 0 42px rgba(246,212,123,.25); opacity:.9; }
.troll-stage::after { content:"✦   ·      ✧    ·"; position:absolute; inset:22px 0 auto; color:rgba(202,238,225,.48); font-size:1rem; letter-spacing:18px; text-align:center; text-shadow:-120px 55px rgba(246,212,123,.5),130px 95px rgba(105,214,196,.45); }
.troll-shadow { width: 205px; height: 32px; position: absolute; left: 50%; bottom: 10px; z-index:1; border-radius: 50%; background: rgba(0,0,0,.38); filter: blur(8px); transform: translateX(-50%); }
.troll-shadow::before,.troll-shadow::after { content:""; width:14px; height:24px; position:absolute; bottom:13px; border-radius:50% 50% 35% 35%; background:#ef91b1; box-shadow:0 10px 0 -3px #d9ead0; filter:none; }
.troll-shadow::before { left:-54px; transform:rotate(-8deg); }.troll-shadow::after { right:-45px; width:11px; height:18px; background:#f6d47b; transform:rotate(9deg); }
.troll { --fur:#73c78f; --fur-dark:#43815b; --outfit:#8d72d8; width: 250px; height: 322px; position: relative; z-index:2; transform-origin: 50% 90%; transition: filter .2s; }
.troll:not(.celebrate) { animation:troll-breathe 4.2s ease-in-out infinite; }
@keyframes troll-breathe { 0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-4px) rotate(-.5deg)}55%{transform:translateY(-4px) rotate(.5deg)} }
.troll-head { width: 190px; height: 172px; position: absolute; left: 30px; top: 52px; z-index: 4; border: 3px solid rgba(13,24,38,.42); border-radius: 48% 52% 46% 54% / 43% 45% 55% 57%; background: radial-gradient(circle at 35% 28%,rgba(255,255,255,.25),transparent 18%),radial-gradient(circle at 68% 72%,rgba(255,255,255,.08) 0 2px,transparent 3px),var(--fur); background-size:auto,18px 18px,auto; box-shadow: inset -13px -13px 0 rgba(0,0,0,.09),0 13px 22px rgba(0,0,0,.23); }
.troll-head::after { content:""; width:22px; height:11px; position:absolute; left:24px; top:111px; border-radius:50%; background:rgba(237,113,151,.2); box-shadow:120px 0 rgba(237,113,151,.2); }
.troll-ear { width: 58px; height: 76px; position: absolute; top: 101px; z-index: 2; border: 3px solid rgba(13,24,38,.4); background: var(--fur); }
.troll-ear::after { content:""; width: 22px; height: 34px; position: absolute; top: 17px; border-radius: 50%; background: var(--fur-dark); opacity: .45; }
.troll-ear-left { left: 8px; border-radius: 80% 20% 55% 45%; transform: rotate(-19deg); }
.troll-ear-left::after { left: 18px; }
.troll-ear-right { right: 8px; border-radius: 20% 80% 45% 55%; transform: rotate(19deg); }
.troll-ear-right::after { right: 18px; }
.troll-brows { position: absolute; left: 43px; right: 43px; top: 38px; display: flex; justify-content: space-between; }
.troll-brows span { width: 34px; height: 7px; border-radius: 99px; background: var(--fur-dark); transform: rotate(8deg); }
.troll-brows span + span { transform: rotate(-8deg); }
.troll-eyes { position: absolute; left: 34px; right: 34px; top: 51px; display: flex; justify-content: space-between; }
.troll-eyes > span { width: 47px; height: 51px; position: relative; display: grid; place-items: center; border: 3px solid #263338; border-radius: 50%; background: #fff6dc; box-shadow: inset 0 -5px 0 rgba(0,0,0,.08); }
.troll-eyes i { width: 19px; height: 25px; position:relative; display: block; border-radius: 50%; background: #17202e; box-shadow: inset 5px 0 0 #69d6c4; }
.troll-eyes i::after { content:""; width:5px; height:7px; position:absolute; right:3px; top:3px; border-radius:50%; background:white; opacity:.85; }
.troll-eyes[data-style="bright"] > span,.troll-eyes[data-style="tiny"] > span { animation:troll-blink 5.5s ease-in-out infinite; }
@keyframes troll-blink { 0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)} }
.troll-eyes .third-eye { display: none; }
.troll-eyes[data-style="sleepy"] > span { height: 29px; margin-top: 16px; border-width: 0 0 5px; border-radius: 0 0 50% 50%; background: transparent; }
.troll-eyes[data-style="sleepy"] i { display: none; }
.troll-eyes[data-style="tiny"] > span { width: 35px; height: 39px; margin: 6px; }
.troll-eyes[data-style="tiny"] i { width: 12px; height: 15px; }
.troll-eyes[data-style="three"] { left: 36px; right: 36px; top: 62px; }
.troll-eyes[data-style="three"] > span { width: 39px; height: 42px; }
.troll-eyes[data-style="three"] > span i { width: 15px; height: 20px; }
.troll-eyes[data-style="three"] .third-eye { display: grid; position: absolute; left: 50%; top: -42px; transform: translateX(-50%); }
.troll-nose { width: 33px; height: 27px; position: absolute; left: 50%; top: 99px; z-index: 2; border-radius: 52% 48% 55% 45%; background: var(--fur-dark); box-shadow: inset -5px -4px 0 rgba(0,0,0,.1); transform: translateX(-50%); }
.troll-nose::after { content:""; width: 6px; height: 5px; position: absolute; left: 8px; top: 13px; border-radius: 50%; background: rgba(12,25,30,.5); box-shadow: 12px 0 rgba(12,25,30,.5); }
.troll-mouth { width: 65px; height: 28px; position: absolute; left: 50%; top: 128px; overflow: hidden; border: 4px solid #442b3b; border-top: 0; border-radius: 0 0 50% 50%; background: #6d334e; transform: translateX(-50%); }
.troll-mouth span { width: 18px; height: 10px; position: absolute; right: 8px; bottom: -1px; border-radius: 50% 50% 0 0; background: #ef8099; }
.troll-mouth[data-style="tooth"]::before { content:""; width: 16px; height: 16px; position: absolute; left: 10px; top: 0; background: #fff6dc; clip-path: polygon(0 0,100% 0,50% 100%); }
.troll-mouth[data-style="oh"] { width: 31px; height: 36px; border: 4px solid #442b3b; border-radius: 50%; }
.troll-mouth[data-style="oh"] span { display:none; }
.troll-mouth[data-style="grin"] { width: 80px; height: 26px; border: 4px solid #442b3b; border-radius: 10px 10px 50% 50%; background: #fff6dc; }
.troll-mouth[data-style="grin"]::after { content:""; width: 100%; height: 3px; position:absolute; left:0; top:8px; background:#d7cdb3; }
.troll-mouth[data-style="grin"] span { display:none; }
.troll-freckles { position:absolute; left:20px; top:115px; color:var(--fur-dark); font-size:.8rem; letter-spacing:3px; opacity:.65; }
.troll-body { width: 144px; height: 128px; position: absolute; left: 53px; bottom: 9px; z-index: 3; border: 3px solid rgba(13,24,38,.42); border-radius: 45% 45% 28% 28%; background: var(--fur); box-shadow: inset -10px -8px 0 rgba(0,0,0,.08); }
.troll-arm { width: 45px; height: 109px; position:absolute; top:2px; z-index:-1; border:3px solid rgba(13,24,38,.42); border-radius:40px; background:var(--fur); transform-origin:50% 15%; }
.troll-arm span { width:42px; height:42px; position:absolute; bottom:-10px; border:3px solid rgba(13,24,38,.35); border-radius:50%; background:var(--fur); }
.troll-arm-left { left:-29px; transform:rotate(12deg); }
.troll-arm-right { right:-29px; transform:rotate(-12deg); }
.troll-arm-left span { left:-6px; }.troll-arm-right span { right:-6px; }
.troll-outfit { position:absolute; inset:15px -3px -5px; overflow:hidden; background:var(--outfit); box-shadow:inset -10px -8px 0 rgba(0,0,0,.12),inset 0 3px 0 rgba(255,255,255,.12); clip-path:polygon(17% 0,35% 0,41% 9%,59% 9%,65% 0,83% 0,100% 18%,89% 34%,83% 29%,88% 100%,12% 100%,17% 29%,11% 34%,0 18%); }
.troll-outfit::before { content:"•\A•"; white-space:pre; position:absolute; left:50%; top:26px; z-index:2; color:rgba(255,255,255,.58); font:900 .75rem/1.9 "Nunito"; transform:translateX(-50%); }
.troll-outfit span { width:46px; height:22px; position:absolute; left:50%; top:-5px; z-index:3; display:block; border:5px solid rgba(255,255,255,.48); border-top:0; border-radius:0 0 50% 50%; background:rgba(21,29,58,.42); transform:translateX(-50%); }
.troll-outfit[data-style="spots"] { background:radial-gradient(circle at 20% 25%,#f6d47b 0 7px,transparent 8px),radial-gradient(circle at 70% 45%,#69d6c4 0 8px,transparent 9px),radial-gradient(circle at 36% 78%,#ef8099 0 9px,transparent 10px),var(--outfit); }
.troll-outfit[data-style="stars"] { background:var(--outfit); }
.troll-outfit[data-style="stars"]::after { content:"✦    ✧\A  ✦    ✦"; white-space:pre; position:absolute; inset:23px 12px 36px; z-index:1; color:#ffe9a5; text-align:center; font-size:1.15rem; line-height:2.1; }
.troll-outfit[data-style="leaf"] { clip-path:polygon(17% 0,35% 0,41% 9%,59% 9%,65% 0,83% 0,100% 18%,89% 34%,83% 29%,90% 88%,78% 100%,66% 91%,52% 100%,38% 91%,23% 100%,10% 88%,17% 29%,11% 34%,0 18%); }
.troll-outfit[data-style="leaf"]::after { content:""; position:absolute; inset:0; z-index:1; background:repeating-linear-gradient(120deg,transparent 0 20px,rgba(238,255,187,.3) 21px 27px); }
.troll-outfit i { height:15px; position:absolute; left:10px; right:10px; bottom:29px; z-index:3; display:block; border-top:2px solid rgba(255,255,255,.25); border-bottom:2px solid rgba(0,0,0,.18); background:rgba(25,24,53,.42); }
.troll-outfit b { width:18px; height:17px; position:absolute; left:50%; bottom:28px; z-index:4; display:block; border:3px solid #f6d47b; border-radius:4px; background:var(--outfit); box-shadow:0 2px 3px rgba(0,0,0,.2); transform:translateX(-50%); }
.troll-feet { position:absolute; left:8px; right:8px; bottom:-16px; display:flex; justify-content:space-between; z-index:-1; }
.troll-feet span { width:58px; height:31px; border:3px solid rgba(13,24,38,.4); border-radius:50% 50% 35% 35%; background:var(--fur); }
.troll-hair { width:173px; height:76px; position:absolute; left:39px; top:19px; z-index:6; pointer-events:none; }
.troll-hair span { width:41px; height:63px; position:absolute; bottom:0; border:3px solid rgba(13,24,38,.35); border-radius:70% 30% 55% 45%; background:#493254; transform:rotate(-22deg); }
.troll-hair span:nth-child(2){left:30px;bottom:15px;transform:rotate(-9deg)}.troll-hair span:nth-child(3){left:66px;bottom:21px;transform:rotate(2deg)}.troll-hair span:nth-child(4){left:103px;bottom:14px;transform:rotate(12deg)}.troll-hair span:nth-child(5){right:0;transform:rotate(25deg)}
.troll-hair[data-style="blue"] span { background:#4aa9b1; }.troll-hair[data-style="sun"] span { background:#e5a949; }.troll-hair[data-style="pink"] span { background:#d86f9e; }
.troll-hair[data-style="moss"] span { height:38px; bottom:5px; border-radius:50%; background:#477c59; }.troll-hair[data-style="moss"] span:nth-child(2),.troll-hair[data-style="moss"] span:nth-child(4){bottom:20px}.troll-hair[data-style="moss"] span:nth-child(3){bottom:27px}
.troll-hat { display:none; position:absolute; z-index:9; pointer-events:none; }
.troll-hat[data-style="cap"] { width:160px; height:65px; left:45px; top:2px; display:block; border:3px solid rgba(13,24,38,.42); border-radius:70% 55% 18% 18%; background:#7656b5; transform:rotate(-4deg); }
.troll-hat[data-style="cap"]::after { content:""; width:70px; height:15px; position:absolute; right:-32px; bottom:-5px; border:3px solid rgba(13,24,38,.42); border-radius:50%; background:#7656b5; }
.troll-hat[data-style="wizard"] { width:0; height:0; left:65px; top:4px; display:block; border-left:60px solid transparent; border-right:60px solid transparent; border-bottom:80px solid #584291; filter:drop-shadow(0 4px 0 #2e234e); transform:rotate(-5deg); }
.troll-hat[data-style="wizard"]::before { content:""; width:148px; height:20px; position:absolute; left:-74px; top:70px; border-radius:50%; background:#584291; box-shadow:inset 0 -5px 0 rgba(0,0,0,.18); }
.troll-hat[data-style="wizard"]::after { content:"✦"; position:absolute; left:-11px; top:39px; color:#f6d47b; font-size:23px; }
.troll-hat[data-style="crown"] { width:125px; height:70px; left:63px; top:0; display:block; background:#e6b94f; clip-path:polygon(0 100%,0 25%,24% 62%,42% 8%,61% 62%,86% 18%,100% 100%); filter:drop-shadow(0 3px 0 #7f5b28); }
.troll-hat[data-style="flower"] { width:104px; height:64px; left:74px; top:11px; display:block; }
.troll-hat[data-style="flower"]::before { content:"✿"; color:#f19abb; font-size:70px; line-height:1; text-shadow:0 3px 0 #7e4260; }
.troll[data-fur="berry"] { --fur:#bd75a4;--fur-dark:#80466e }.troll[data-fur="moon"] { --fur:#8aa6d6;--fur-dark:#516c9e }.troll[data-fur="moss"] { --fur:#73c78f;--fur-dark:#43815b }.troll[data-fur="sun"] { --fur:#dca657;--fur-dark:#96682f }.troll[data-fur="cloud"] { --fur:#b7b0d6;--fur-dark:#777095 }
.troll[data-outfit-color="plum"] { --outfit:#8d72d8 }.troll[data-outfit-color="berry"] { --outfit:#c95f8c }.troll[data-outfit-color="lake"] { --outfit:#3e9a9d }.troll[data-outfit-color="sun"] { --outfit:#d49a3f }.troll[data-outfit-color="leaf"] { --outfit:#4c8b5e }
.troll.celebrate { animation:troll-dance .6s ease-in-out 3; }
.troll.celebrate .troll-arm-left { animation:wave-left .35s ease-in-out 5 alternate}.troll.celebrate .troll-arm-right{animation:wave-right .35s ease-in-out 5 alternate}
@keyframes troll-dance { 25%{transform:translateY(-12px) rotate(-4deg)}75%{transform:translateY(-12px) rotate(4deg)} }
@keyframes wave-left { to{transform:rotate(105deg)} } @keyframes wave-right { to{transform:rotate(-105deg)} }
.magic-burst { position:absolute; inset:10px; z-index:5; pointer-events:none; }
.magic-burst span { position:absolute; left:50%; top:50%; color:var(--gold); font-size:1.7rem; animation:spark-out .75s ease-out forwards; }
@keyframes spark-out { to{transform:translate(var(--x),var(--y)) rotate(120deg) scale(.2);opacity:0} }
.name-label { margin-top:3px; color:var(--muted); font-size:.7rem; font-weight:900; letter-spacing:.1em; }
.name-input { width:min(280px,100%); min-height:44px; margin:6px 0 10px; padding:7px 14px; border:2px solid rgba(105,214,196,.4); border-radius:13px; color:var(--cream); background:rgba(8,15,32,.72); box-shadow:inset 0 2px 9px rgba(0,0,0,.25); font:800 1.2rem "Baloo 2"; text-align:center; }
.reaction-text { min-height:39px; margin:0 0 12px; padding:9px 15px; position:relative; border:1px solid rgba(246,212,123,.21); border-radius:13px; color:var(--gold); background:rgba(54,42,66,.56); font-size:.86rem; font-weight:800; text-align:center; }
.reaction-text::before { content:""; width:10px; height:10px; position:absolute; left:50%; top:-6px; border-left:1px solid rgba(246,212,123,.21); border-top:1px solid rgba(246,212,123,.21); background:rgba(54,42,66,.96); transform:translateX(-50%) rotate(45deg); }
.preview-actions { width:100%; display:grid; grid-template-columns:1fr 1.25fr; gap:10px; }
.preview-actions button,.reset-button { min-height:48px; padding:10px 12px; border-radius:13px; font-weight:900; cursor:pointer; }
.magic-button { border:1px solid rgba(105,214,196,.5); color:#c9fff5; background:linear-gradient(135deg,rgba(34,104,94,.58),rgba(45,66,97,.64)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.magic-button:hover { border-color:var(--mint);filter:brightness(1.08) }
.done-button { border:1px solid rgba(246,212,123,.65); color:#211b30; background:linear-gradient(135deg,#ffe8a5,#e7bd64); box-shadow:0 5px 0 #92703d; }
.done-button:active { transform:translateY(3px);box-shadow:0 2px 0 #92703d }
.troll-controls { min-width:0; padding:30px 32px; background:radial-gradient(circle at 100% 0,rgba(146,117,218,.07),transparent 28%); }
.controls-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.controls-heading h2 { margin:0; font-size:clamp(1.75rem,3vw,2.35rem); line-height:1.1; }
.controls-heading > div::after { content:""; width:56px; height:3px; margin-top:10px; display:block; border-radius:99px; background:linear-gradient(90deg,var(--mint),transparent); }
.reset-button { flex:0 0 auto; border:1px solid rgba(203,186,245,.22); color:var(--lavender); background:rgba(45,52,88,.65); }
.category-tabs { margin:22px 0 17px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.category-tab { min-height:54px; padding:7px 9px; position:relative; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(203,186,245,.19); border-radius:13px; color:var(--muted); background:linear-gradient(145deg,rgba(32,40,77,.84),rgba(24,29,57,.8)); font-weight:900; cursor:pointer; }
.category-tab span { font-size:1.2rem; }
.category-tab[aria-selected="true"] { border-color:rgba(246,212,123,.62); color:#271f35; background:linear-gradient(135deg,#ffe8a5,#dfb758); box-shadow:0 4px 0 #846436; }
.option-panel { min-height:205px; padding:16px; display:grid; grid-template-columns:repeat(3,1fr); align-content:start; gap:11px; border:1px solid rgba(105,214,196,.18); border-radius:21px; background:linear-gradient(155deg,rgba(8,17,35,.62),rgba(30,22,53,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
.part-option { min-height:86px; padding:9px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border:2px solid rgba(203,186,245,.17); border-radius:15px; color:var(--ink); background:rgba(43,49,82,.78); font-weight:900; cursor:pointer; transition:transform .16s,border-color .16s; }
.part-option:hover { transform:translateY(-3px);border-color:rgba(246,212,123,.5) }
.part-option[aria-pressed="true"] { border-color:var(--mint); background:rgba(47,94,88,.54); box-shadow:0 0 0 3px rgba(105,214,196,.11); }
.part-option[aria-pressed="true"]::after { content:"✓"; width:20px; height:20px; position:absolute; right:7px; top:7px; display:grid; place-items:center; border-radius:50%; color:#10272a; background:var(--mint); font-size:.7rem; font-weight:900; }
.part-option { position:relative; }
.option-icon { width:38px;height:38px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.38);border-radius:50%;background:var(--option-color,#6f668f);box-shadow:inset -4px -4px 0 rgba(0,0,0,.12),0 4px 9px rgba(0,0,0,.16);font-size:1.25rem; }
.part-option[data-category="eyes"] .option-icon,.part-option[data-category="mouth"] .option-icon,.part-option[data-category="hat"] .option-icon { color:#282038;background:linear-gradient(145deg,#fff4d5,#d8c9ef); }
.part-option[data-category="hair"] .option-icon { border-radius:55% 45% 50% 50%;color:#fff;background:var(--option-color,#493254); }
.part-option[data-category="outfit"] .option-icon { border-radius:12px;color:#fff;background:var(--option-color,#8d72d8); }
.part-option[data-value*="spots"] .option-icon { background:radial-gradient(circle at 28% 30%,#f6d47b 0 4px,transparent 5px),radial-gradient(circle at 70% 68%,#69d6c4 0 4px,transparent 5px),var(--option-color); }
.part-option[data-value*="stars"] .option-icon::after { content:"✦";color:#ffe9a5 }.part-option[data-value*="stars"] .option-icon{font-size:0}
.part-option small { color:var(--muted);font-size:.7rem; }
.part-option[aria-pressed="true"] small { color:#c9fff5; }
.choice-help { min-height:24px; margin:15px 4px 0; color:var(--muted); text-align:center; font-size:.86rem; font-weight:800; }
.builder-kind-note { width:min(700px,calc(100% - 32px)); margin:0 auto 70px; padding:21px 26px; display:flex; align-items:center; gap:18px; border:1px solid rgba(246,212,123,.22); border-radius:20px; background:rgba(56,43,72,.35); }
.builder-kind-note > span { color:#ef8daf;font-size:36px }.builder-kind-note strong{font:800 1.15rem "Baloo 2"}.builder-kind-note p{margin:2px 0 0;color:var(--muted)}
@media(max-width:880px){.builder-shell{grid-template-columns:1fr;max-width:680px}.troll-preview-panel{border-right:0;border-bottom:1px solid rgba(203,186,245,.16)}.troll-controls{padding:28px}.option-panel{min-height:0}}
@media(max-width:560px){.builder-hero{padding-top:38px}.builder-hero h1{font-size:3.35rem}.builder-shell{width:calc(100% - 16px);border-radius:22px}.troll-preview-panel{padding:20px 13px 24px}.troll-stage{height:335px}.troll{transform:scale(.94)}.preview-actions{grid-template-columns:1fr}.troll-controls{padding:24px 13px}.controls-heading{align-items:center}.controls-heading h2{font-size:1.65rem}.reset-button{min-height:42px;padding:8px;font-size:.76rem}.category-tabs{grid-template-columns:repeat(2,1fr);margin-top:22px}.category-tab{min-height:50px}.option-panel{padding:11px;gap:8px}.part-option{min-height:78px;font-size:.78rem}.option-icon{width:31px;height:31px}.builder-kind-note{align-items:flex-start}.workshop-note{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.troll,.troll-eyes[data-style="bright"] > span,.troll-eyes[data-style="tiny"] > span,.troll.celebrate,.troll.celebrate .troll-arm-left,.troll.celebrate .troll-arm-right{animation:none}}