.magic-page .project-heading{max-width:none;padding-top:32px}.magic-page .project-heading h1{font-size:clamp(2.3rem,4vw,3.7rem);margin:12px 0 16px;max-width:900px}.magic-page .project-heading>p{max-width:780px;margin-bottom:0}.magic-page .project-heading>.eyebrow{display:block;margin-top:25px}.magic-layout{display:grid;grid-template-columns:290px minmax(0,1fr);align-items:start;gap:28px;margin-top:16px}.magic-selection h2{font-family:inherit;font-size:1.12rem;font-weight:700;line-height:1.4;margin:0 0 16px;color:var(--red)}.object-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.object-picks button{border:1px solid #d9c7b2;border-radius:12px;background:#fffaf2;padding:8px 5px 10px;font:600 .875rem/1.25 Arial,sans-serif;color:#4d1520;cursor:pointer;min-height:114px;display:flex;flex-direction:column;align-items:center;justify-content:start;gap:5px}.object-picks button:hover{border-color:#a15539;background:#fff1d0}.object-picks button[aria-pressed=true]{border:2px solid #8d1728;background:#f9e9c9;box-shadow:0 0 0 2px #fff inset}.object-thumb{display:block;width:60px;height:60px;background-image:url('assets/magic-objects-atlas.png');background-size:300% 300%;background-repeat:no-repeat}.magic-page .project-magic{aspect-ratio:1.5;min-height:360px;max-height:560px;background:radial-gradient(ellipse at 50% 70%,#853326 0%,#400b19 53%,#210612 100%)}.magic-page .project-magic>.magic-hat{width:42%;max-width:300px;bottom:-5%;z-index:5}.magic-page .magic-scene-label{top:20px;left:22px;font-size:.95rem;max-width:57%}.magic-page .magic-illustration{font-size:.875rem;right:18px;top:18px}.magic-object-display,.magic-result-display{position:absolute;left:50%;top:10%;width:46%;height:55%;display:flex;align-items:center;justify-content:center;z-index:2;transform:translateX(-50%);transform-origin:50% 105%;pointer-events:none}.object-sprite{width:min(100%,310px);aspect-ratio:1;background-image:url('assets/magic-objects-atlas.png');background-size:300% 300%;background-repeat:no-repeat;filter:drop-shadow(0 8px 14px #14030960)}.magic-result-display{container-type:size;top:8%;height:58%;width:64%;opacity:0;transform:translate(-50%,50%) scale(.08);transform-origin:50% 100%;z-index:4}.project-sprite{background-repeat:no-repeat;max-height:100%;filter:drop-shadow(0 14px 20px #15030966)}.magic-page .magic-reveal-caption{bottom:7%;left:7%;right:7%;text-shadow:none}.magic-page .magic-reveal-caption strong{font-size:clamp(1.5rem,2.5vw,2.25rem);color:#fff4d8}.magic-page .magic-reveal-caption small{font-size:.875rem;letter-spacing:.06em}.magic-page .magic-controls{display:block;padding:22px 25px}.magic-page .magic-actions{margin-top:15px}.magic-page .magic-actions .btn{min-width:245px}.magic-page .magic-object-display{transition:transform 1s cubic-bezier(.5,0,.85,.4),opacity .9s}.magic-page .magic-result-display{transition:opacity .65s,transform 1.05s cubic-bezier(.2,.85,.25,1.15)}.magic-page .project-magic[data-phase=gathering] .magic-object-display,.magic-page .project-magic[data-phase=casting] .magic-object-display{transform:translate(-50%,85%) scale(.035) rotate(-18deg);opacity:0}.magic-page .project-magic[data-phase=revealed] .magic-object-display{opacity:0;transform:translate(-50%,85%) scale(.035)}.magic-page .project-magic[data-phase=revealed] .magic-result-display{opacity:1;transform:translateX(-50%) scale(1)}.magic-page .project-magic[data-phase=revealed] .magic-hat{opacity:0;transform:translate(-50%,65%) scale(.75)}.magic-sparkles{position:absolute;inset:15% 8% 20%;z-index:4;display:flex;align-items:center;justify-content:space-around;font-size:2.4rem;color:#ffe69e;opacity:0;pointer-events:none}.magic-sparkles span{align-self:flex-start;font-size:1.4rem;margin-top:20%}.project-magic[data-phase=casting] .magic-sparkles{animation:sparkle-surprise 1.3s ease-out}.magic-result-copy{display:flex;align-items:center;gap:35px;justify-content:space-between;border-left:4px solid #c69c3c;padding:8px 0 8px 25px;margin:30px 0 20px}.magic-result-copy h2{font-size:1.8rem;margin:6px 0 12px}.magic-result-copy p{max-width:680px;margin:0}.magic-result-copy .btn{white-space:normal;text-align:center;flex-shrink:0;max-width:280px}.magic-page .project-disclaimer{font-size:.875rem;line-height:1.6;max-width:1020px}.magic-questions{margin-top:35px}.magic-page [hidden]{display:none!important}
@keyframes sparkle-surprise{0%{opacity:0;transform:scale(.5)}40%{opacity:1}100%{opacity:0;transform:scale(1.5) rotate(15deg)}}
@media(max-width:1000px){.magic-layout{grid-template-columns:230px minmax(0,1fr);gap:18px}.object-picks{grid-template-columns:repeat(2,minmax(0,1fr))}.magic-page .project-magic{min-height:380px;aspect-ratio:1.2}.magic-result-copy{display:block}.magic-result-copy .btn{margin-top:20px}}
@media(max-width:700px){.magic-layout{display:flex;flex-direction:column;gap:18px}.magic-selection{width:100%}.object-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.object-picks button{min-height:92px;font-size:.875rem;padding:5px}.object-thumb{width:43px;height:43px}.magic-page .project-heading{padding-top:25px;padding-bottom:8px}.magic-page .project-heading h1{font-size:2.4rem}.magic-page .project-heading>p{font-size:1rem}.magic-page .project-heading>.eyebrow{margin-top:18px}.magic-page .project-window{width:100%;border-radius:18px}.magic-page .project-magic{min-height:340px;aspect-ratio:1.05}.magic-page .magic-object-display{width:53%;top:14%;height:48%}.magic-page .magic-result-display{width:76%;height:55%;top:14%}.magic-page .project-magic>.magic-hat{width:52%;bottom:-3%}.magic-page .magic-controls{padding:20px}.magic-page .magic-actions .btn{min-width:0;flex:1;width:100%}.magic-page .magic-scene-label{font-size:.875rem;left:15px;top:15px;max-width:52%}.magic-page .magic-illustration{font-size:.875rem;top:14px;right:12px;padding:5px 8px;max-width:40%}.magic-page .magic-reveal-caption strong{font-size:1.5rem}.magic-page .magic-reveal-caption small{font-size:.875rem}.magic-page .magic-reveal-caption{bottom:6%}.magic-result-copy{padding-left:18px}.magic-result-copy h2{font-size:1.6rem}.magic-page .magic-reset{font-size:.875rem}.magic-page .magic-controls #magic-hint{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.magic-page .project-magic *{animation:none!important;transition:none!important}}

.magic-scenario{font-weight:700;font-size:.9375rem;color:#805e17;margin:0 0 10px}
