/* Sera's family yard: many hands get ready for the cousins. Shares the accepted lesson interior: dark ink, warm gold, Fraunces/DM Sans. */
.hands-studio{background:#0c1524;border-block:1px solid rgba(255,255,255,.18)}
.hands-wrap{max-width:1150px;margin:auto;padding:90px 32px}
.hands-heading h2{font-size:clamp(36px,5vw,62px);margin:10px 0 18px}
.hands-heading>p{max-width:620px;font-size:18px}
.hands-work{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.hands-main{min-width:0}
#yard-board{position:relative;aspect-ratio:600/420;width:100%;border-radius:14px;overflow:hidden;background:#cfdde6;user-select:none;-webkit-user-select:none}
#yard-board>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
@media(prefers-reduced-motion:reduce){#ferry{transition:none}}
.hands-tools{display:flex;flex-direction:column;gap:14px}
.hands-tools p{margin:0}
#hands-step{font-family:Fraunces,Georgia,serif;font-size:28px;color:#fff;margin:0}
#hands-status{min-height:78px;font-size:17px}
.tool-group{display:flex;flex-direction:column;gap:10px}
.job-row{display:grid;grid-template-columns:1fr;gap:8px}
.job-btn{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 14px 10px 10px;border-radius:12px;background:#152237;color:#f5f0e6;font-size:15px;line-height:1.3}
.job-btn svg{width:46px;height:34px;flex:none}
.job-btn b{display:block;font-weight:700;color:#fff}
.job-btn span{color:#c7bbaa;font-size:13px}
.pick-row{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:10px;background:#152237;color:#f5f0e6;font-size:14px;min-height:46px}
.pick svg{width:40px;height:30px;flex:none}
.pick[aria-pressed=true]{border-color:#c9a227;border-width:2px;background:#1d2d44}
.pick:disabled{opacity:.45}
.hint{color:#a6b4c6;font-size:13px}
.hands-actions{display:flex;gap:9px;flex-wrap:wrap}
.hands-actions button{flex:1}
.made-strip{margin-top:14px;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#101d30}
.made-strip h3{font-family:'DM Sans',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#e4c463;margin:0 0 10px}
#made-row{display:flex;flex-wrap:wrap;gap:8px}
.made{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:10px;background:#152237;font-size:14px}
.made i{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid #fff}
#compare-panel{margin-top:30px;border-top:1px solid rgba(255,255,255,.18);padding-top:22px}
#compare-title{font-size:clamp(28px,4vw,40px);margin:0 0 14px}
#compare-scenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.mini{margin:0}
.mini-board{position:relative;aspect-ratio:600/420;border-radius:10px;overflow:hidden;background:#cfdde6}
.mini-board>svg{position:absolute;inset:0;width:100%;height:100%}
.mini figcaption{margin-top:8px;font-size:14px;color:#e4c463;font-weight:700}
#arrive-note{font-size:17px;margin-top:16px}
.hands-reflection{border-top:1px solid rgba(255,255,255,.18);margin-top:46px;padding-top:22px;max-width:780px}
.hands-reflection p{font-size:18px}
.hands-story{display:flex;gap:24px;align-items:center;margin:44px 0 0}
.hands-story img{width:170px;height:170px;object-fit:cover;border-radius:8px}
.hands-story blockquote{font-family:Fraunces,Georgia,serif;font-size:25px;margin:0;color:#fff}
.dialog-head{flex-wrap:wrap}
@media(max-width:760px){.hands-wrap{padding:48px 18px}.hands-work{grid-template-columns:1fr;gap:20px}.hands-heading>p{font-size:16px}#hands-status{min-height:0;font-size:16px}#hands-step{font-size:24px}.hands-story{align-items:start;gap:16px}.hands-story img{width:96px;height:96px}.hands-story blockquote{font-size:20px}.hands-actions button{font-size:14px;padding:12px 8px}}
@media(max-width:360px){.pick{font-size:13px;padding-right:8px}.pick svg{width:34px;height:26px}.job-btn{font-size:14px}}

/* In-scene tap targets for the three jobs (shown only while choosing). */
.wonder{color:#e4c463;font-size:17px;max-width:620px}
#scene-targets{position:absolute;inset:0;pointer-events:none}
.scene-btn{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;display:grid;place-items:center;border-radius:50%}
.scene-btn::before{content:"";width:34px;height:34px;border-radius:50%;background:rgba(201,162,39,.92);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);animation:pulse 1.8s ease-in-out 5}
.scene-btn span{position:absolute;top:100%;margin-top:2px;white-space:nowrap;background:rgba(8,14,23,.86);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
.scene-btn:hover::before,.scene-btn:focus-visible::before{background:#e4c463}
#yard-board[data-phase]:not([data-phase=choose]) #scene-targets{display:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.scene-btn::before{animation:none}}
@media(max-width:420px){.scene-btn span{font-size:11px;padding:3px 7px}}
#ferry{transition:transform 6s cubic-bezier(.35,.55,.3,1)}
#ferry.in{transform:translateX(-38px)}
#compare-panel .hands-story{margin-top:28px}
.scene-btn.up span{top:auto;bottom:100%;margin:0 0 2px}