:root {
  --dw-bg: #0c1f22; --dw-fg: #f4ece4; --dw-accent: #ff3a2e; --dw-panel: rgba(16, 30, 33, .96);
  --dw-font-body: 'Nunito', system-ui, sans-serif; --drip: 'Nosifer', Impact, sans-serif; --chunk: 'Bowlby One', Impact, sans-serif;
  --orange: #ff7a1a; --blood: #c8102e; --line: rgba(244, 236, 228, .14);
}
body { overflow-x: hidden; background: radial-gradient(90% 70% at 70% 20%, #3a1214 0%, var(--dw-bg) 60%); }
h1, h2 { margin: 0 0 .4em; line-height: 1; }
h2 { font-family: var(--chunk); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.8rem); }
section { padding: clamp(48px, 7vw, 100px) clamp(16px, 5vw, 64px); }
[id] { scroll-margin-top: 76px; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 12px clamp(16px, 4vw, 40px); background: #0c1f22d8; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #ff3a2e44; }
.brand { font-family: var(--chunk); color: var(--dw-fg); text-decoration: none; letter-spacing: .04em; }
.brand span { color: var(--dw-accent); }

.stage { padding-top: clamp(96px, 11vw, 130px); max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } }
.kicker { font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; color: var(--orange); margin: 0 0 1rem; }
.title h1 { font-family: var(--drip); font-weight: 400; font-size: clamp(1.55rem, 6.6vw, 3rem); color: var(--dw-accent); text-shadow: 0 0 30px #ff3a2e55; }
.title h1 span { font-family: var(--chunk); color: var(--dw-fg); font-size: 1.25em; text-shadow: none; }
.lede { font-size: clamp(1.05rem, 1.8vw, 1.2rem); max-width: 50ch; }
.lede b { color: var(--orange); }

.robot { position: relative; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px #000b, 0 0 0 3px #ff3a2e33; --glow: .7; }
.robot img { width: 100%; height: auto; }
.robot.shake { animation: shake .25s infinite; }
@keyframes shake { 25% { transform: translate(1px, -1px) rotate(.3deg); } 75% { transform: translate(-1px, 1px) rotate(-.3deg); } }
.eye { position: absolute; width: 15%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: var(--glow);
  background: radial-gradient(circle, #ff6a5a 0%, #ff3a2e88 35%, transparent 70%); transition: opacity .6s; }
.eye-l { left: 35.5%; top: 30%; } .eye-r { left: 53%; top: 32%; }
.lemon-eyes .eye { background: radial-gradient(circle, #fff27a 0%, #ffe23a88 35%, transparent 70%); opacity: 1; }
.bubble { position: absolute; left: 4%; top: 4%; max-width: 62%; margin: 0; font-family: var(--chunk); font-size: clamp(.85rem, 1.8vw, 1.1rem); line-height: 1.2; color: #160404; background: #fff;
  padding: .7em .9em; border-radius: 16px 16px 16px 4px; box-shadow: 0 8px 20px #0007; }
.bubble.pop { animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.8); } }
.hs { position: absolute; z-index: 3; aspect-ratio: 1; border-radius: 50%; border: 2px dashed transparent; background: transparent; transition: border-color .3s, background .3s; }
.hs:hover, .hs:focus-visible { border-color: var(--orange); background: #ff7a1a22; }
.hs.is-found { border-color: #f4ece488; }
.hs-peels { left: 80%; top: 78%; width: 18%; } .hs-glass { left: 80%; top: 61%; width: 13%; }

.controls { margin-top: 16px; display: grid; gap: 12px; }
.meter { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-family: var(--chunk); font-size: .9rem; }
.m-bar { height: 16px; border-radius: 999px; background: #ffffff14; overflow: hidden; border: 1px solid var(--line); }
.m-fill { display: block; height: 100%; width: 60%; background: linear-gradient(90deg, var(--orange), var(--dw-accent)); transition: width .5s; }
.fruit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 520px) { .fruit { grid-template-columns: repeat(2, 1fr); } }
.fruit button { font: inherit; font-weight: 800; color: var(--dw-fg); background: #12292d; border: 2px solid #ffffff1c; border-radius: 14px; padding: .7em .5em; cursor: pointer; display: grid; justify-items: center; gap: .3em;
  transition: transform .12s, border-color .2s; }
.fruit button:hover, .fruit button:focus-visible { border-color: var(--orange); transform: translateY(-2px); }
.fruit button:active { transform: scale(.95); }
.f { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset -4px -4px 0 #0003; }
.f-blood { background: radial-gradient(circle at 50% 50%, #8a0f1e 0 30%, #d8331f 31% 60%, #ff7a1a 61%); }
.f-navel { background: #ff9a1a; } .f-lemon { background: #ffe23a; border-radius: 50% 40%; } .f-grape { background: radial-gradient(circle, #ff8a7a 0 55%, #f6b04a 56%); width: 40px; height: 40px; }
.stats { margin: 0; font-weight: 700; }
.stats b { color: var(--orange); }

.file { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .file { grid-template-columns: 1fr; } }
.poster { background: #f4ece4; color: #1a0b08; padding: 1.3rem 1.4rem; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 20px 50px #0009; }
.p-k { font-family: var(--chunk); color: var(--blood); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .6rem; }
.poster ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 1rem; }
.offer { font: inherit; color: var(--dw-fg); background: #12292d; border: 2px solid #ffffff1c; border-radius: 14px; padding: 1rem; cursor: pointer; display: grid; gap: .2rem; text-align: left; transition: border-color .2s, transform .2s; }
.offer b { font-family: var(--chunk); font-weight: 400; font-size: 1.6rem; color: var(--orange); }
.offer span { font-weight: 700; }
.offer:hover, .offer:focus-visible { border-color: var(--orange); transform: translateY(-2px); }

.list { display: grid; justify-items: center; text-align: center; }
.list .dw-optin { text-align: left; width: 100%; margin-bottom: 1.4rem; }
.dw-optin button[type=submit] { color: #fff; }
.offer-note { margin: 0; color: var(--orange); font-weight: 700; }
.found { font-weight: 800; color: var(--orange); }
.journal { max-width: 700px; text-align: left; } .journal li { margin: .5em 0; }
.reward { max-width: 640px; border: 2px solid var(--orange); border-radius: 12px; padding: .8rem 1.1rem; }

.foot { padding: 30px 16px 10px; text-align: center; border-top: 1px solid var(--line); }
.more { font-weight: 700; }
.bolt { font-size: 1.5rem; color: #8aa; background: none; border: 0; cursor: pointer; opacity: .5; }
.bolt:hover, .bolt.is-found { opacity: 1; color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .robot.shake { animation: none; } }
.robot img { max-height: 64vh; object-fit: cover; }