body{background:#d5a875;background-image:linear-gradient(90deg,#ffffff0a,#6a32151f),repeating-linear-gradient(0deg,#a66b3822 0 2px,transparent 3px 16px)}
aside{background:radial-gradient(circle at 35px 35px,#82411f 0 2px,transparent 3px),linear-gradient(165deg,#51301f,#21130d 70%);box-shadow:12px 0 34px #1a090777;border-right:3px solid #e57728}
.logo{background:#170d09aa;margin:12px;border:1px solid #f49b4a55;border-radius:14px;padding:13px}.logo b{box-shadow:0 0 24px #ff8a38aa,inset 0 0 0 5px #582815}
nav button{margin:3px 0;border-left:3px solid transparent;transition:.18s}nav button:hover,nav button.on{transform:translateX(4px);border-left-color:#ffd09d;box-shadow:0 6px 16px #0007}
header{background:linear-gradient(90deg,#fff7e9f2,#edc897eb);box-shadow:0 5px 18px #4b251422;position:relative;z-index:2}
.hero{position:relative;overflow:hidden;min-height:540px;background:linear-gradient(90deg,#1a0d08e8 0%,#28130fb8 42%,#00000018 68%),url("cornhole-hero.png") center/cover no-repeat;border-bottom:6px solid #de681e}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#180b08aa,transparent 68%),linear-gradient(0deg,#10080588,transparent 45%);pointer-events:none}.hero>div{position:relative;z-index:1}
.hero small{color:#ffb66e;font-weight:900;letter-spacing:2px}.hero h2{color:#fff7eb;text-shadow:0 3px 16px #000}.hero h2 em{color:#ff8a3d;text-shadow:0 3px 16px #000}.hero p{font-size:18px;color:#f7e5d2;text-shadow:0 2px 8px #000}.hero .board{display:none}
.actions button:last-child{color:white;border-color:#ffb06b;background:#2a140dbb}
.content{background:linear-gradient(#f4dfc4ef,#e9c79def)}.heading small{color:#c45619;font-weight:900;letter-spacing:2px}
.card{border:2px solid #b66c34;background:linear-gradient(145deg,#fffaf0,#efd2ac);box-shadow:0 12px 28px #4b230f42;transition:.2s;position:relative;overflow:hidden}.card:hover{transform:translateY(-6px);box-shadow:0 18px 34px #4b230f66}.card:after{content:"";position:absolute;right:-24px;top:-24px;width:86px;height:86px;border-radius:50%;background:#e76e2320;border:14px solid #7b3d1b16}.card h3{color:#482414}.card button{box-shadow:0 5px 12px #9f461d55}
.foot{border-top:5px solid #e46b23;background:linear-gradient(110deg,#21120c,#452719)}
@media(max-width:800px){aside{box-shadow:14px 0 38px #000b}.hero{min-height:610px;text-align:left;background:linear-gradient(0deg,#160b08e8,#28140c77),url("cornhole-hero.png") 62% center/cover no-repeat}.hero h2{font-size:46px}.hero p{font-size:18px}.actions{justify-content:flex-start}.content{padding-top:48px}.card{padding:28px}.foot{padding-bottom:45px}}
nav a{display:block;width:100%;padding:10px;border-radius:8px;color:#ead8c8;text-decoration:none;font-weight:bold;margin:3px 0;border-left:3px solid transparent;transition:.18s}nav a:hover,nav a.on{background:linear-gradient(90deg,#df671f,#b84b16);color:white;transform:translateX(4px);border-left-color:#ffd09d;box-shadow:0 6px 16px #0007}
.actions a{display:inline-block;padding:13px 18px;border-radius:8px;font-weight:bold;text-decoration:none}.actions a:last-child{color:white;border:2px solid #ffb06b;background:#2a140dbb}
.foot a{color:#ffae68}.foot div{margin-left:auto}
@media(max-width:800px){.foot div{margin-left:0}}