#create .experience-section{background:#ece8c2;color:#3b2e1c;padding:46px 24px 50px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;font:400 15px/1.5 BloomNunito,sans-serif}
#create .experience-section *{box-sizing:border-box}
#create article{min-width:0;text-align:center}
#create .mode-label{margin:0 auto 6px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
#create h2{font:700 27px/1.15 BloomNunito,sans-serif;margin:0 0 16px;letter-spacing:-.02em}
#create p{margin:17px auto 0;max-width:23ch;font-size:14px;line-height:1.55}
#create button{font:inherit;color:inherit}
#create .visual{height:272px;position:relative;margin:auto;max-width:216px}
#create .journey{overflow:hidden}
#create .place-main{position:absolute;left:36%;top:0;width:64%;height:130px;object-fit:contain;z-index:2}
#create .place-next{position:absolute;left:0;top:128px;width:59%;height:128px;object-fit:contain;z-index:2}
#create .path-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:#ad9685}
#create .path-dot:nth-of-type(1){left:59%;top:74%}
#create .path-dot:nth-of-type(2){left:65%;top:79%}
#create .path-dot:nth-of-type(3){left:70%;top:84%}
#create .path-dot:nth-of-type(4){left:74%;top:89%}
#create .mystery{position:absolute;width:32px;height:39px;right:6%;bottom:3%;object-fit:contain}

#create .run{display:flex;flex-direction:column;align-items:center;justify-content:center}
#create .bouquet{position:relative;flex-shrink:0;width:166px;height:133px;margin:0 auto 3px}
#create .bloom-card{position:absolute;left:46px;top:12px;width:76px;height:104px;border:1px solid #ad9685;border-radius:8px;background:#f5edd4;display:grid;place-items:center;transform-origin:50% 100%}
#create .bloom-card:first-child{transform:rotate(-20deg) translateX(-14px)}
#create .bloom-card:nth-child(2){top:1px;transform:rotate(1deg)}
#create .bloom-card:nth-child(3){transform:rotate(22deg) translateX(13px)}
#create .bloom-card img{width:85%;height:78%;object-fit:contain}
#create .next-label{font-size:12px;margin:8px 0 10px}
#create .choices{display:flex;gap:12px}
#create .field-choice{background:#e5ddbd;padding:7px;border:1px solid #b7a39d;border-radius:6px;display:grid;gap:5px;justify-items:center;min-height:88px;transition:transform .18s ease}
#create .field-choice:hover{transform:translateY(-2px)}
#create .field-choice[aria-pressed=true]{outline:2px solid #3b2e1c;outline-offset:3px}
#create .field-grid{display:grid;grid-template-columns:repeat(3,16px);grid-template-rows:repeat(3,16px);gap:1px}
#create .field-grid i{background:url('assets/tile-bare.webp') center/100% no-repeat}
#create .field-grid i.water{background-image:url('assets/tile-water.webp'),url('assets/tile-bare.webp');background-size:76% auto,100%;background-position:50% 86%,center}
#create .field-grid i.absent{visibility:hidden}
#create .field-reward{width:24px;height:24px;object-fit:contain}

/* Bottega: paint ground and water, then try the field. */
#create .workshop{display:flex;flex-direction:column;justify-content:center;gap:14px;align-items:center}
#create .board{display:grid;grid-template-columns:repeat(5,36px);grid-template-rows:repeat(5,36px);gap:2px}
#create .tile{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:5px;background:url('assets/tile-bare.webp') center/100% no-repeat;cursor:pointer}
#create .tile.empty{background:none;outline:1px dashed #ad9685;outline-offset:-3px}
#create .tile.water{background-image:url('assets/tile-water.webp'),url('assets/tile-bare.webp');background-size:76% auto,100%;background-position:50% 86%,center}
#create .tile.verdant{background-image:url('assets/tile-verdant.webp')}
#create .tile.verdant.water{background-image:url('assets/tile-water.webp'),url('assets/tile-verdant.webp')}
#create .tile.brush{box-shadow:0 0 0 2px #3b2e1c}
#create .tile img{position:absolute;left:12%;top:2%;width:76%;height:76%;object-fit:contain;pointer-events:none;animation:tile-bloom .34s cubic-bezier(.3,1.6,.5,1)}
#create .tile.hybrid img{animation-duration:.5s}
@keyframes tile-bloom{from{transform:scale(.2) translateY(30%)}to{transform:none}}
#create .tools{display:flex;align-items:center;gap:6px;min-height:44px}
#create .tool{display:grid;place-items:center;width:40px;height:40px;padding:5px;background:transparent;border:1px solid transparent;border-radius:8px}
#create .tool img{width:26px;height:26px;object-fit:contain}
#create .tool[aria-pressed=true]{background:#f5edd4;border-color:#3b2e1c}
#create .swatch.erase{display:block;width:22px;height:22px;border:1px dashed #ad9685;border-radius:4px}
#create .swatch.water{display:block;width:26px;height:26px;background:url('assets/tile-water.webp') 50% 86%/76% auto no-repeat,url('assets/tile-bare.webp') center/100% no-repeat}
#create .hand{display:none;place-items:center;width:40px;height:40px}
#create .hand img{width:32px;height:32px;object-fit:contain}
#create .try{margin-left:4px;padding:7px 14px;font-weight:700;font-size:14px;white-space:nowrap;background:#ece8c2;border:2px solid #e78c5b;border-radius:10px}
#create .try:hover{background:#e8bf92}
#create .workshop[data-mode=play] .tool{display:none}
#create .workshop[data-mode=play] .hand{display:grid}
#create .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(prefers-reduced-motion:reduce){#create .tile img{animation:none}}

@media(max-width:620px){
 #create .experience-section{grid-template-columns:1fr;padding:25px 18px;gap:40px}
 #create article{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:0 20px;text-align:left;align-items:start;max-width:470px;width:100%;margin:auto}
 #create .mode-label{grid-column:2;grid-row:1;margin:0 0 4px;align-self:end}
 #create h2{grid-column:2;grid-row:2;font-size:24px;margin-bottom:9px}
 #create article>p:last-child{grid-column:2;grid-row:3;margin:0;font-size:14px}
 #create .visual{grid-column:1;grid-row:1/4;width:200px;height:250px}
 #create .place-main{height:120px}
 #create .place-next{top:118px;height:118px}
 #create .run{height:auto}
 #create .tools{gap:4px}
 #create .tool{width:36px;height:36px}
}
@media(max-width:440px){
 #create .experience-section{padding:24px 12px;gap:40px}
 #create article{grid-template-columns:1fr;grid-template-rows:auto;text-align:center;gap:0}
 #create .mode-label,#create h2,#create .visual,#create article>p:last-child{grid-column:1;grid-row:auto}
 #create .visual{width:216px;height:272px;margin:4px auto 0}
 #create article>p:last-child{max-width:27ch;margin:10px auto 0}
}