/* Farm adventure layout, with the Magic Realm's own artwork. */
::selection{background:#decaff;color:#17324d}
.opening-title{top:5%;left:5%;transform:none;width:44%;text-align:left;color:#fff8df;text-shadow:0 2px 5px #152345}
.opening-title h1{font-size:clamp(30px,3.7vw,54px);line-height:1.1;text-wrap:balance}
.yard-resident{width:19%;height:33%}
.resident-0{left:9%;top:32%}.resident-1{left:30%;top:43%}.resident-2{left:52%;top:37%}.resident-3{left:74%;top:27%}
.journey-title{background:#fffaf0f5}
@media(orientation:portrait){
 .opening-title{top:4%;left:6%;width:88%;text-align:center}
 .opening-title h1{font-size:clamp(30px,7.5vw,44px)}
 .yard-resident{width:34%;height:23%}
 .resident-0{left:12%;top:29%}.resident-1{left:56%;top:29%}.resident-2{left:10%;top:53%}.resident-3{left:55%;top:53%}
 .journey-start{bottom:5%}.journey-start>.guide-control{width:56px;height:74px}
}

.game-icon{width:26px;height:26px;display:inline-block;vertical-align:middle;flex-shrink:0}.current-star .game-icon{width:28px;height:28px}.sliding-hole .game-icon{width:36px;height:36px}.shape-slot img.shadow{filter:brightness(0);opacity:.55}

/* Calm character stage and the shared carved-wood action set. */
.yard-residents{inset:34% 5% 20%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2%}
.yard-resident{position:static;width:100%;height:100%;filter:drop-shadow(0 6px 4px #55453428)}
.yard-resident img{height:calc(100% - 30px);width:100%}
.yard-resident span{background:#fffaf0;padding:4px 15px;color:#17324d}
.journey-title{top:82px;background:#fffaf0ed;padding:10px 24px;box-shadow:none}
.journey-title h1{font-size:28px}
.journey-start{bottom:3%;gap:16px}
.journey-start>.guide-control{width:92px;height:110px}
.journey-start .art-button,.meeting-message .art-button,.modal-actions .art-button{width:88px;height:88px;min-width:88px;flex-shrink:0;background:none;border:0;padding:0;box-shadow:none}
.meeting-message .art-button{margin-left:auto}
.modal-actions{gap:24px}
.play-view{grid-template-rows:70px minmax(0,1fr) 108px}
.play-footer{display:flex;flex-direction:column;justify-content:center;gap:4px}
.play-footer #feedback{flex:0;font-size:15px;line-height:1.2}
.play-footer #check{width:80px;height:80px;min-height:80px;grid-column:auto;grid-row:auto}
@media(orientation:portrait){
 .yard-residents{inset:31% 8% 19%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));column-gap:10%;row-gap:12px}
 .journey-title{top:82px;max-width:90%;padding:10px 18px}
 .journey-title h1{font-size:24px}.journey-title p{font-size:16px}
 .journey-start>.guide-control{width:75px;height:96px}
 .play-view{grid-template-rows:70px minmax(0,1fr) 108px}
}

/* Cool local shade separates golden Luno from the sunlit paving. */
.journey-start{isolation:isolate}
.journey-start>.guide-control{width:110px;height:126px;position:relative;filter:drop-shadow(0 4px 3px #253e5970)}
.journey-start::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:55px;bottom:3px;width:138px;height:48px;transform:translateX(-50%);background:radial-gradient(ellipse,#29475f70 0%,#35576f40 35%,transparent 72%)}
@media(max-width:500px) and (max-height:720px){.journey-start>.guide-control{width:90px;height:102px}.journey-start::before{left:45px;width:116px;height:40px}}
@media(max-width:500px) and (max-height:720px){
 .play-view{grid-template-rows:56px minmax(0,1fr) 104px;gap:8px}
 .journey-title{padding:8px 12px}.journey-title h1{font-size:21px}.journey-title p{font-size:14px}
 .yard-residents{inset:33% 8% 20%;row-gap:6px}
 .journey-start{bottom:2%}.journey-start>.guide-control{width:90px;height:102px}
 .journey-start .art-button{width:80px;height:80px;min-width:80px}
}

.yard-resident{pointer-events:auto;cursor:pointer;background:none;border:0;padding:0;min-width:0;color:inherit;font:inherit}.yard-resident:focus-visible{outline:3px solid #6244bb;outline-offset:5px;border-radius:24px}.yard-resident:hover img{transform:scale(1.03)}.guide-control{background:none;border:0;padding:0;cursor:pointer;flex-shrink:0}.guide-control img{width:100%;height:100%;object-fit:contain}.guide-control:focus-visible{outline:3px solid #6244bb;outline-offset:4px;border-radius:20px}
