.village { min-height: clamp(570px,43vw,740px); }
.village .hero-art picture { display: block; width: 100%; height: 100%; }
.village .hero-art img,.village-film { object-position: 63% center; }
.village-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; visibility:hidden; }
.village-film.has-frame { visibility:visible; }
.village .hero-art::after { background: linear-gradient(90deg,#100d09ef 0%,#120d0ac4 26%,#1d131164 43%,transparent 65%),linear-gradient(0deg,#1f150ce8,transparent 19%); }
.village .hero-copy { padding-block: 68px 88px; }
.village .hero-tag { display: flex; align-items: center; gap: 12px; color: #f6d395; }
.village .hero-tag::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.village .hero-description { max-width: 445px; color: #f2e6d2; }
.village-guide { position: absolute; z-index: 2; left: 66%; bottom: 13%; display: flex; flex-direction: column; align-items: center; color: #ffe8b8; }
.village-guide img { width: clamp(52px,5vw,85px); filter: drop-shadow(3px 5px 3px #160c08aa); transform-origin: bottom; transition: transform .3s; }
.village-guide:is(:hover,:focus-visible) img { transform: translateY(-5px) rotate(-3deg); }
.village-guide span { padding: 4px 11px; font-size: 12px; background: #1f170feb; border: 1px solid #c6a16a; box-shadow: inset 0 0 0 2px #2b2217; }
.village-guide small { color: #ddb172; font-size: 9px; letter-spacing: .13em; margin-right: 6px; }
.scene-strip { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; border-top: 1px solid #e5c89842; background: #1b150ee6; }
.scene-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 17px; }
.scene-strip .wrap { min-height: 40px; font-size: 12px; color: #dfceb4; }
.scene-strip small,.scene-strip button { color: #c1aa8d; }
.scene-strip i { margin-right: 7px; color: #e3b872; font-size: 9px; }
.scene-strip button { padding: 5px 12px; background:#2c231a; font-size:12px; border:1px solid #806649; border-radius:3px; }
.scene-strip button:hover { color:#ffe3a9; border-color:#bd9a60; }
.workshop { padding-block: clamp(40px,5.5vw,84px); border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 75% 62%,#30231999,transparent 72%),#191510; }
.workshop-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.25fr); gap: clamp(26px,5.5vw,86px); align-items: center; }
.workshop-intro .eyebrow { color: #d8b17a; }
.workshop-intro .eyebrow span { margin-right: 7px; font-size: 8px; }
.workshop-intro h2 { max-width: 470px; font-size: clamp(37px,3.6vw,54px); text-wrap: balance; }
.workshop-intro > p:not(.eyebrow) { margin-top: 17px; max-width: 400px; }
.workshop-art.guide-art { margin-top: 20px; border: 0; padding: 0; background: transparent; }
.workshop-art img { height: 152px; aspect-ratio: auto; object-position: 50% 55%; mask-image: linear-gradient(90deg,transparent,#000 7%,#000 78%,transparent),linear-gradient(0deg,transparent,#000 23%,#000 72%,transparent); mask-composite: intersect; }
.workbench { min-width: 0; background: #211c16; border: 1px solid #78603f; box-shadow: 0 12px 45px #09070545,inset 0 0 0 3px #2c251b; }
.workbench > header,.workshop-rules,.workshop-history { padding: 15px clamp(14px,2vw,25px); }
.workbench > header { display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #685238; background:linear-gradient(95deg,#413322,#2b231a); }
.workbench h3 { font-size: 24px; color: #f7e6c4; }
.workbench header > span { font-size: 9px; letter-spacing: .14em; color: #dcbb85; }
.workshop-rules,.workshop-rules fieldset > div { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.workshop-rules { align-items: end; justify-content: space-between; }
.workshop-rules fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.workshop-rules legend,.workshop-min { color: #cbb899; font-size: 12px; }
.workshop-rules fieldset > div { min-height: 34px; gap: 9px; }
.workshop-rules label { cursor: pointer; }
.workshop-rules fieldset label { display:flex; align-items:center; gap:5px; font-size: 13px; }
.workshop-rules fieldset span { color: #bba17e; font: italic 13px Georgia,serif; }
.workshop-rules input { accent-color: #ccaa64; width: 15px; height: 15px; margin: 0; }
.workshop-min { display: grid; gap: 2px; }
.workshop-min select { padding: 3px 10px; height: 34px; color: var(--text); border: 1px solid #715936; background: #181510; }
.workshop-rules .button { min-height: 36px; padding: 8px 14px; }
.workshop-items { margin: 2px clamp(14px,2vw,25px) 0; border-block: 1px solid #51432f; }
.sample-shield { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 12px 0; }
.sample-shield + .sample-shield { border-top: 1px solid #43392c; }
.sample-slot { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #715d40; box-shadow: inset 0 0 10px #0b0907; background: #342d23; }
.sample-slot img { width: 38px; height: 38px; image-rendering: pixelated; }
.sample-slot span { position:absolute; bottom:0; right:3px; color: #c4b59d; font: 9px monospace; }
.sample-shield h4,.workshop-history h4 { margin:0; color: #e9dbbe; font-size:14px; font-weight:600; }
.sample-shield p { font-size:12px; }
.sample-shield .with-bonus { color: #a6cd9b; }
.sample-verdict { text-align:right; font-size:12px; font-weight:600; }
.sample-shield[data-outcome="kept"] .sample-verdict { color: #a4d7b4; }
.sample-shield[data-outcome="dropped"] .sample-verdict { color: #efab92; }
.sample-shield[data-outcome="dropped"] .sample-slot img { opacity: .3; transform: translateY(4px); transition: opacity .3s,transform .3s; }
.workshop-history h4 { font-size: 12px; }
.workshop-history p,.workshop-history li { font-size: 12px; }
.workshop-history ol { margin: 0; padding: 0; list-style:none; }
.workshop-history p,.workshop-history ol:not(:empty) { margin-top: 6px; }
.workshop-history li { display: flex; align-items: baseline; gap: 10px; color: #dbceb8; }
.workshop-history time { color: #beac93; font: 11px monospace; }
.field-guides { grid-template-columns: 1fr; }
.field-guides .field-guide { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; align-items: center; }
@media(max-width:850px) {
 .workshop-layout { grid-template-columns: 1fr 1.35fr; gap: 22px; }
 .workshop-rules { gap: 8px; justify-content: start; }
}
@media(max-width:700px) {
 .village { display:block; min-height:0; }
 .village .hero-art { height: 265px; }
 .village .hero-art img,.village-film { object-position: 74% 50%; }
 .village .hero-art::after { background: linear-gradient(0deg,#16120f,transparent 33%); }
 .village .hero-copy { padding-block: 246px 28px; }
 .village-guide { top: 126px; bottom:auto; left:auto; right:9%; }
 .village-guide img { width: 40px; }
 .village-guide span { font-size:10px; }
 .scene-strip { position: relative; }
 .scene-strip .wrap { gap:8px; font-size:10px; }
 .scene-strip i { margin-right: 2px; }
 .workshop-layout,.field-guides .field-guide { grid-template-columns: 1fr; }
 .workshop-art { display: none; }
 .workshop-rules { justify-content: space-between; }
 .sample-shield { gap:9px; }
 .sample-shield h4 { font-size:13px; }
 .workshop-items { margin-inline: 12px; }
 .workbench header > span { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
 .village-guide img,.sample-slot img { transition: none; }
}