.world-lab-open .canvas{width:100vw;height:100dvh;transform:none!important;mask:none!important}
.world-lab-open .canvas>:not(.header):not(.world-lab){visibility:hidden!important;pointer-events:none!important}
.world-lab-open .header{z-index:30!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;left:calc(50% - 733px * var(--scale,1));right:auto;top:calc(50% - 496px * var(--scale,1));width:1467px;transform:scale(var(--scale,1));transform-origin:top left}
.world-lab{position:absolute;inset:0;z-index:21;overflow:hidden;background:#100c17;color:#f4eaf4}
.yard-scene{position:absolute;inset:0;background:url('assets/environment/backyard/wall.png') center/cover no-repeat}
.yard-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(#090610e6,transparent 25%,transparent 65%,#090610eb);pointer-events:none}
.yard-title{position:absolute;top:16%;left:26%;pointer-events:none;text-shadow:0 2px 16px #000}
.yard-title small{font-size:10px;letter-spacing:3px;color:#f88bcd}.yard-title h1{font-size:clamp(26px,3.6vw,55px);font-weight:500;margin:12px 0}.yard-title p{font-size:13px;color:#c8b7c7}
.yard-scene canvas{position:absolute;left:25%;top:35%;width:53%;height:39%;opacity:.94;mix-blend-mode:screen;pointer-events:none}
.world-lab[data-mode=draw] canvas{pointer-events:auto;touch-action:none;cursor:crosshair;outline:1px dashed #efa5da44;outline-offset:10px}
.yard-panel{position:absolute;bottom:3%;left:5%;right:5%;display:flex;flex-direction:column;align-items:center;gap:12px}
.yard-status{margin:0;font-size:13px;color:#f0d4e6;text-align:center}
.yard-panel button{border:1px solid #ad658f88;border-radius:24px;background:#160d19ed;padding:12px 18px;font-size:11px;color:#ffd4f0;min-height:42px}
.yard-panel button:hover{background:#442139}.yard-panel button:disabled{opacity:.35;cursor:default}
.yard-start{letter-spacing:1px}.yard-tools,.yard-confirm{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.yard-tools label{font-size:11px;display:flex;gap:8px;align-items:center}.yard-tools input{width:75px;accent-color:#fc70c4}
.yard-colors{display:flex;gap:7px}.yard-colors button{width:28px;min-height:28px;padding:0;border:2px solid transparent;border-radius:50%}.yard-colors button[aria-pressed=true]{outline:2px solid white;outline-offset:3px}
.yard-local{font-size:10px;color:#ae9bab;text-align:center;max-width:620px}.yard-confirm span{font-size:12px}
@media(max-width:700px){.yard-scene{background-size:auto 100%;background-position:55% center}.yard-title{left:7%;top:18%}.yard-title h1{font-size:31px}.yard-title p{max-width:250px;line-height:1.5}.yard-scene canvas{left:8%;width:84%;top:37%;height:31%}.yard-panel{bottom:2%;gap:10px}.yard-panel button{padding:10px 12px}.yard-local{font-size:9px}.yard-tools{gap:10px}}

.yard-title{left:25%;top:13%;width:54%;transform:rotate(-2deg)}
.yard-title h1{margin:0}.yard-title img{display:block;width:100%;height:auto;mix-blend-mode:screen}
.yard-panel .yard-start{display:flex;align-items:center;gap:20px;background:transparent;border:0;text-align:left;font-size:19px;padding:0 20px;letter-spacing:.2px}
.yard-start small{display:block;font-size:11px;color:#d5b5cc;margin-top:8px}
.spray-can{display:inline-block;position:relative;width:38px;height:68px;border:1px solid #ba90ac;border-radius:9px 9px 12px 12px;background:linear-gradient(90deg,#100d16,#4c3449 38%,#17101d 85%);box-shadow:inset 0 -8px 0 #09080e,0 8px 18px #0008;transform:rotate(-15deg);transition:transform .35s}
.spray-can:before{content:"";position:absolute;top:-10px;left:8px;width:20px;height:12px;border-radius:5px 5px 0 0;background:#80717c}
.spray-can i{position:absolute;left:13px;top:-16px;width:12px;height:8px;background:#e2d0dc;border-radius:3px}
.spray-can b{position:absolute;inset:17px 0 auto;background:var(--paint,#ff69c8);color:#251021;text-align:center;font-size:24px;font-style:italic;line-height:28px}
.yard-start:hover .spray-can,.yard-start:focus-visible .spray-can{transform:rotate(8deg) translateY(-6px)}
.yard-tool-hint{font-size:11px;color:#efc5df}.yard-cursor{position:absolute;z-index:40;pointer-events:none;display:none;transform:translate(7px,17px)}
.yard-cursor .spray-can{width:25px;height:45px;transform:rotate(25deg)}.yard-cursor .spray-can b{font-size:16px;line-height:20px;top:10px}
.yard-cursor:before{content:"";position:absolute;width:45px;height:45px;left:-25px;top:-35px;background:radial-gradient(var(--paint,#ff69c8),transparent 65%);opacity:0}
.yard-over-wall .yard-cursor{display:block}.yard-spraying .yard-cursor:before{opacity:.7}
body:has(.yard-over-wall) #dd-cursor{visibility:hidden}
.world-lab[data-mode=draw] canvas{cursor:none}
@media(pointer:coarse){.yard-cursor{display:none!important}}
@media(max-width:700px){.yard-title{left:5%;top:20%;width:90%}.yard-panel .yard-start{font-size:16px}.yard-start small{font-size:10px}.yard-title h1{font-size:inherit}}
@media(prefers-reduced-motion:reduce){.spray-can{transition:none}}

/* Compact lettering and a larger clear painting area, surrounded by sample doodles. */
.yard-title{left:19%;top:10%;width:43%}
.yard-scene canvas{left:23%;top:29%;width:58%;height:46%}
.yard-doodles{position:absolute;left:13%;top:15%;width:76%;height:67%;pointer-events:none;mix-blend-mode:screen}
@media(max-width:700px){.yard-title{left:7%;top:15%;width:76%}.yard-scene canvas{left:13%;top:31%;width:74%;height:39%}.yard-doodles{left:0;top:21%;width:100%;height:54%}}

/* Show only the main graffiti lettering from the combined artwork. */
.yard-title img{clip-path:inset(0 0 34% 0)}

.yard-status:empty{display:none}