@import url('https://fonts.googleapis.com/css2?family=Rye&family=Roboto+Slab:wght@500;700;900&display=swap');
:root{--paper:#24150e;--ink:#f1d8a3;--orange:#d79437;--line:#694a2b}
body{background:radial-gradient(ellipse at 50% 15%,#68402580,transparent 58%),repeating-linear-gradient(0deg,#1b100a 0 2px,#2a1a11 2px 80px,#1d110b 81px 84px);color:var(--ink)}
header{height:70px;border-color:#80592c;max-width:1450px;margin:auto;padding:0 26px;background:#180d08b3}.brand{font-family:'Rye',Georgia,serif;letter-spacing:-3px;color:#dfb86d;text-shadow:2px 3px #000}.brand span{color:#bd7041}.edition{color:#b69b72;letter-spacing:2px}
main{grid-template-columns:.85fr 1.6fr .72fr;gap:26px;margin:26px auto 32px;max-width:1450px;padding:0 24px}
.intro{padding:0;text-align:center}.intro>.eyebrow{padding:18px 4px;color:#d9b97e;font-size:9px;letter-spacing:2px}.intro>.eyebrow i{display:none}
.intro h1{background:url('assets/wooden-sign.webp') center/100% 100%;padding:34px 10px 36px;margin:0;font-family:'Rye',Georgia,serif;font-size:clamp(38px,4.1vw,65px);line-height:1.1;letter-spacing:-2px;color:#ecc77d;text-shadow:0 2px #3c1e0b,2px 4px #120b06;filter:drop-shadow(0 7px 4px #0008)}.intro h1 span{color:#e5ae52;-webkit-text-stroke:0}.intro h1 sup{display:none}
.intro>p{font-family:'Roboto Slab',Georgia,serif;font-size:20px;color:#d9bd8c;line-height:1.6;margin:25px 0}.rule,.hint{display:none}
.receipt{max-width:none;margin-top:30px;border:0;background:url('assets/wooden-sign.webp') center/100% 100%;padding:28px 18px 30px;color:#dbb77c}.receipt strong{font-family:'Roboto Slab',Georgia,serif;font-size:44px;color:#ffdc87;margin:12px 0}.receipt small{color:#bb9a6a;line-height:1.9;letter-spacing:.4px}
.machine{padding:10px;background:linear-gradient(90deg,#3c2414,#6b4429 40%,#392111);border:2px solid #9d713c;border-radius:3px;box-shadow:0 14px 35px #0009,inset 0 0 0 3px #29170d}.machine-head{color:#d2ac72;letter-spacing:1px;font-size:8px;padding:5px 4px 13px}.board{background:#21160f;box-shadow:0 3px 0 #231109;border:0}
.controls{gap:9px;margin-top:12px}.controls button,.small,.reset{background:url('assets/wooden-sign.webp') center/100% 100%!important;color:#ffe0a0!important;border:0;box-shadow:0 5px 0 #130b07,0 7px 7px #0008;border-radius:2px;text-shadow:0 2px #120a04;font-family:'Roboto Slab',Georgia,serif;font-weight:900;letter-spacing:.6px}.controls button{padding:24px 18px;font-size:13px}#drop{color:#ffd779!important}#herd{font-size:10px}.controls button:hover,.small:hover,.reset:hover{filter:brightness(1.2)}.controls button:active{box-shadow:0 2px 0 #130b07;transform:translateY(3px)}.small{padding:15px 18px;font-size:8px}
aside{align-self:start;padding:30px 22px;background:url('assets/wooden-sign.webp') center/100% 100%;filter:drop-shadow(0 8px 5px #0008);text-align:center}.scorelabel{font-size:9px;color:#d6ac6b;letter-spacing:1.5px}#score{font:900 clamp(30px,3.8vw,54px) 'Roboto Slab',Georgia,serif;line-height:1.3;color:#ffda83;text-shadow:0 3px #1a0d05;margin:8px 0 12px}.divider{background:#9567346b;margin:19px 0}.stat{font-size:7px;letter-spacing:0;color:#ccac7b;align-items:center}.stat b{font-size:13px;color:#ffe2a0}aside>.eyebrow{color:#c4965a;letter-spacing:.8px;font-size:8px}
.horse-card{padding:0;background:#21120c;border:2px solid #8b6033;box-shadow:0 4px 8px #0007;margin-top:14px;overflow:hidden}.horse-card>div{margin:0}.horse-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 35%}.horse-card b{display:block;padding-top:14px;color:#eac789}.horse-card p{color:#b99a6e;font:11px/1.5 'Roboto Slab',Georgia,serif;margin:10px 0 15px}.toggle{color:#e4c595;justify-content:center;font-size:8px}.toggle span{color:#ce9c51}.aside-note{color:#a98a60;font-size:10px}.reset{margin-top:12px;padding:16px 18px;font-size:8px;width:100%}
footer{border-color:#704b27;color:#a78555;font-size:7px;gap:20px;line-height:1.7}footer a{color:#c5a26c}
@media(max-width:1000px){main{grid-template-columns:.8fr 1.6fr;gap:20px}aside{grid-column:1/-1;padding:24px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap;filter:none}aside .divider{display:none}#score{margin:0;font-size:32px}.reset{width:auto;margin:0}.scorelabel{align-self:center}.stat{margin:0;gap:12px}.toggle{margin:0}.receipt strong{font-size:36px}}
@media(max-width:650px){header{padding:0 15px;height:58px}main{display:flex;padding:0 12px;margin:16px auto;gap:16px}.intro{display:block}.intro>.eyebrow{padding:3px 0 12px;font-size:8px}.intro h1{font-size:32px;line-height:1;padding:23px 8px}.intro h1 br{display:none}.intro h1 span{margin-left:10px}.intro>p{font-size:13px;padding:0;margin:12px 0 0;line-height:1.4}.intro>p br{display:none}.receipt{display:none}.machine{padding:7px}.controls button{padding:20px 16px;font-size:11px}aside{padding:20px 16px;gap:12px}.stat{font-size:6px}.stat b{font-size:11px}.toggle{font-size:7px}footer{font-size:6px}}
aside{border:18px solid transparent;border-image:url('assets/wooden-sign.webp') 100 fill / 18px stretch;background:none;padding:20px 6px}.horse-card>div{aspect-ratio:1;overflow:hidden}.horse-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.8);transform-origin:50% 42%}@media(max-width:1000px){aside{padding:15px 6px}}
body,button,input,a,span,p,strong,small,b,h1,h2,div,label,footer,.brand,.intro h1,.intro h1 span,.intro>p,.receipt strong,#score,.controls button,.small,.reset,#toast{font-family:'Roboto Slab',Georgia,serif!important}
.intro h1{font-weight:900;letter-spacing:-2px;font-size:clamp(38px,4.4vw,68px)}.brand{font-weight:900;letter-spacing:-2px}
.controls button,.small,.reset{background:linear-gradient(180deg,#58351e,#342014)!important;border:1px solid #b3874b;border-radius:10px;box-shadow:inset 0 1px 0 #e5b96a33,0 3px 8px #0005;text-shadow:none;transition:background .15s,transform .15s,box-shadow .15s;font-weight:700;letter-spacing:.3px}
.controls button{padding:19px 20px;font-size:13px}.controls #drop{background:linear-gradient(180deg,#ebbe75,#c78d3e)!important;color:#24150b!important;border-color:#f4d29a;box-shadow:inset 0 1px 0 #fff5,0 3px 12px #0006}
.controls button:hover,.small:hover,.reset:hover{filter:none;box-shadow:inset 0 1px 0 #ffd88d44,0 4px 16px #0007;transform:translateY(-1px)}.controls button:active{transform:translateY(1px);box-shadow:inset 0 1px 4px #0004}
.small{padding:12px 16px}.reset{background:transparent!important;border-color:#a4784255;box-shadow:none}
.stat,.toggle,.scorelabel,.machine-head{font-size:10px}.stat b{font-size:14px}.aside-note{font-size:11px;color:#cfb38b}.receipt small{font-size:9px}
@media(max-width:650px){.intro h1{font-size:30px}.controls button{padding:17px 15px;font-size:11px}.stat,.toggle,.scorelabel{font-size:8px}}
#holding-hoof{position:absolute;z-index:4;width:10.48%;height:28.95%;left:50%;top:-12.5%;transform:translateX(-50%);pointer-events:none;user-select:none;object-fit:fill;filter:drop-shadow(4px 4px 3px #0005)}

/* Real timber fills the cabinet edges around the supplied board. */
body{background:linear-gradient(#160d0750,#160d0770),url('assets/saloon-wall.png') center top/cover fixed;color:var(--ink)}
.machine{background:linear-gradient(90deg,#170a0555,#70431b22 50%,#170a0577),url('assets/saloon-wall.png') center/auto 100%;box-shadow:0 16px 38px #000b,inset 0 0 0 3px #29170d}
.board{background:linear-gradient(90deg,#140b0655,transparent 6%,transparent 94%,#140b0666),url('assets/wooden-sign.webp') center/100% 100%;box-shadow:inset 0 0 6px 3px #100703,0 3px 0 #231109}
#holding-hoof{width:19%;height:37.5%;transform:translateX(-43%);filter:drop-shadow(3px 4px 3px #0006)}

.board{background:#24150d;box-shadow:inset 0 0 8px #000,0 3px 0 #231109}

.board::before,.board::after{content:"";position:absolute;top:0;bottom:0;width:3.72%;background:url('assets/board-rail.png') center/100% 100% no-repeat;z-index:1;pointer-events:none}
.board::before{left:0}.board::after{right:0;transform:scaleX(-1)}

/* Cabinet sides meet the outer frame without an inset gap. */
.machine{padding-left:0;padding-right:0}.machine-head{margin:0 10px}.controls{margin-left:10px;margin-right:10px}.board{width:100%;border-radius:0}.board::before,.board::after{width:3.5%;top:0;bottom:0}
.controls button,.controls #drop{background:url('assets/slot-button.png') center/100% 100% no-repeat!important;border:0;border-radius:10px;color:#241309!important;box-shadow:0 4px 7px #0008;min-height:70px;padding:20px 24px;text-shadow:0 1px #ffe5a288}
.controls #herd{filter:saturate(.65) brightness(.8)}.controls button:hover{filter:brightness(1.12)}.controls button:active{transform:translateY(3px);filter:brightness(.88)}

.controls #drop{justify-content:center;text-align:center;color:#fff!important;font-family:'Rye',Georgia,serif!important;font-size:19px;font-weight:400;letter-spacing:1.2px;text-shadow:0 2px 2px #391600,0 0 5px #542200}
.controls #drop span{font-family:'Rye',Georgia,serif!important;color:#fff!important}.controls #drop span:last-child{display:none}
@media(max-width:650px){.controls #drop{font-size:15px;letter-spacing:.6px}}

.controls #herd{justify-content:center;gap:7px;text-align:center;filter:none;color:#fff!important;font-family:'Rye',Georgia,serif!important;font-size:13px;font-weight:400;letter-spacing:.4px;text-shadow:0 2px 2px #391600,0 0 5px #542200;padding:20px 12px}
.controls #herd span{font-family:'Rye',Georgia,serif!important;color:#fff!important;font-size:12px}.controls #herd:hover{filter:brightness(1.12)}
.auto-button{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;margin-top:20px;padding:12px 16px;border:3px solid #b88a43;border-radius:12px;cursor:pointer;background:linear-gradient(#c74435,#8c1e18);box-shadow:inset 0 2px 2px #ffb8a866,inset 0 -3px 5px #41060099,0 4px 7px #0008;color:#fff;font-size:12px;text-shadow:0 2px 2px #380000}
.auto-button input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.auto-button .auto-title,.auto-button .auto-off,.auto-button .auto-on{font-family:'Rye',Georgia,serif!important;color:#fff}.auto-button .auto-off,.auto-button .auto-on{font-size:10px;letter-spacing:1px}.auto-button .auto-on{display:none}
.auto-button:has(input:checked){background:linear-gradient(#4da65a,#206331);box-shadow:inset 0 2px 2px #c4ffd566,inset 0 -3px 5px #00371499,0 0 13px #56bd5b44,0 4px 7px #0008;text-shadow:0 2px 2px #08300c}.auto-button:has(input:checked) .auto-off{display:none}.auto-button:has(input:checked) .auto-on{display:inline}.auto-button:has(input:focus-visible){outline:3px solid #ffe0a0;outline-offset:4px}.auto-button:active{transform:translateY(2px)}

.controls-legend{display:block;width:100%;height:auto;margin-top:24px;filter:drop-shadow(0 6px 4px #0008)}@media(max-width:650px){.controls-legend{grid-column:1/-1;max-width:350px;margin:14px auto 0}}

.controls-legend{background:url('assets/wooden-sign.webp') center/100% 100%;padding:24px 22px 28px;margin-top:24px;text-align:center}.controls-legend h2{font-family:'Rye',Georgia,serif!important;font-size:15px;color:#f0ce8a;margin:0 0 10px;letter-spacing:1px}.legend-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;margin:7px 0}.legend-keys{display:flex;justify-content:center;gap:4px}.legend-keys img{width:48px;height:40px;object-fit:contain}.legend-row>span{font-family:'Rye',Georgia,serif!important;font-size:14px;color:#fff;text-align:left;text-shadow:0 2px #241008}@media(max-width:650px){.controls-legend{width:100%;max-width:350px}}

.auto-button .auto-title{font-size:clamp(11px,1.15vw,17px);white-space:nowrap}.auto-button{gap:9px;padding-left:10px;padding-right:10px}