:root{--red:#b22234;--barn:#7c1f1a;--blue:#1c2f6b;--hay:#e8c25a;--cream:#fff8e7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--cream);color:#222;overflow-x:hidden}
.lights{position:fixed;top:0;left:0;right:0;height:26px;z-index:50;pointer-events:none;
 background:radial-gradient(circle at 12px 14px,#ffe680 5px,transparent 6px) 0 0/48px 26px,radial-gradient(circle at 36px 14px,#ff6b6b 5px,transparent 6px) 0 0/48px 26px;
 border-top:2px solid #333;animation:tw 1.6s steps(2) infinite}
@keyframes tw{50%{filter:brightness(.55)}}
.hero{position:relative;min-height:100vh;background:linear-gradient(#0b1640 0%,#1c2f6b 55%,#3a4f8f 78%,#6b8f3a 78%,#557a2c 100%);color:#fff;text-align:center;overflow:hidden;display:flex;align-items:center;justify-content:center}
#fw{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;z-index:2;padding:60px 16px 200px}
.kicker{letter-spacing:.3em;color:var(--hay);font-weight:700;margin:0}
h1{font-family:"Rockwell","Arial Black",Impact,sans-serif;font-size:clamp(2.4rem,11vw,7.5rem);margin:.1em 0;letter-spacing:.03em;
 color:#fff;text-shadow:4px 4px 0 var(--red),8px 8px 0 var(--blue),0 0 30px rgba(255,255,255,.4);animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-1deg)}}
.sub{font-size:clamp(1.05rem,3.5vw,1.6rem);font-weight:700;background:var(--red);display:inline-block;padding:.4em .9em;border-radius:8px;border:3px dashed #fff;margin:.5em 0}
.count{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 6px}
.count div{background:#fff;color:var(--barn);border-radius:12px;padding:10px 12px;min-width:76px;box-shadow:0 5px 0 var(--blue)}
.count b{display:block;font-size:clamp(1.5rem,6vw,2.4rem)}
.count span{font-size:.75rem;text-transform:uppercase;font-weight:700}
.note{opacity:.9;font-size:.95rem;max-width:560px;margin:8px auto}
nav a{display:inline-block;margin:10px 6px;padding:.6em 1.3em;background:var(--hay);color:var(--barn);font-weight:800;border-radius:30px;text-decoration:none;box-shadow:0 4px 0 #a8862a}
.barn{position:absolute;bottom:16%;left:4%;width:min(26vw,200px);height:min(18vw,130px);background:repeating-linear-gradient(90deg,var(--barn) 0 14px,#69190f 14px 16px);z-index:1}
.roof{position:absolute;bottom:100%;left:-8%;width:116%;height:60%;background:#5a1410;clip-path:polygon(50% 0,100% 100%,0 100%)}
.door{position:absolute;bottom:0;left:32%;width:36%;height:65%;border:4px solid #fff;background:linear-gradient(45deg,transparent 46%,#fff 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#fff 46% 54%,transparent 54%)}
.hay{position:absolute;bottom:6%;right:6%;width:110px;height:60px;background:repeating-linear-gradient(0deg,var(--hay) 0 6px,#d1a93f 6px 8px);border-radius:10px;z-index:1;box-shadow:-130px 20px 0 -4px var(--hay)}
section{max-width:1000px;margin:0 auto;padding:60px 16px;text-align:center}
h2{font-family:"Rockwell","Arial Black",sans-serif;color:var(--barn);font-size:clamp(1.7rem,5vw,2.6rem);margin:0 0 20px}
h2::before,h2::after{content:" ★ ";color:var(--red)}
.small{color:#555}
.slider{position:relative;aspect-ratio:3/2;max-width:800px;margin:0 auto;border-radius:16px;overflow:hidden;border:6px solid #fff;box-shadow:0 0 0 4px var(--red),0 10px 30px rgba(0,0,0,.25);background:#111}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .7s}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-weight:700}
.art{display:flex;align-items:center;justify-content:center;font-size:clamp(3rem,14vw,7rem)}
.art1{background:radial-gradient(circle at 30% 20%,#ffe68055 0 4%,transparent 5%),radial-gradient(circle at 70% 25%,#ff6b6b55 0 4%,transparent 5%),linear-gradient(#1c2f6b,#7c1f1a)}
.art2{background:linear-gradient(#7fd3ff 0 45%,#2aa6d9 45%)}
.art3{background:radial-gradient(circle,#b22234 0 20%,transparent 21%),linear-gradient(#0b1640,#1c2f6b)}
.sbtn{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.85);width:44px;height:44px;border-radius:50%;font-size:28px;cursor:pointer;z-index:3}
.prev{left:10px}.next{right:10px}
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.tabs button{font:inherit;font-weight:800;padding:.6em 1em;border-radius:10px;border:3px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer}
.tabs button.on{background:var(--red);border-color:var(--red);color:#fff}
.gamebox{max-width:480px;margin:0 auto}
#game{width:100%;height:auto;display:block;border-radius:14px;border:5px solid var(--barn);background:#000;touch-action:none;user-select:none;-webkit-user-select:none}
footer{background:var(--blue);color:#fff;text-align:center;padding:40px 16px 50px;border-top:10px solid var(--red);box-shadow:inset 0 10px 0 #fff}
footer .big{font-family:"Rockwell","Arial Black",sans-serif;font-size:clamp(1.6rem,6vw,2.6rem);margin:0 0 8px}
@media(max-width:600px){.barn{bottom:12%}.hay{transform:scale(.7);right:0}}