/* CHUCKY CLAUDIA — A LITTLE WORLD AFTER DARK */
:root {
  --night: #071329;
  --midnight: #0b1d3b;
  --blue: #14294c;
  --cream: #fff0c9;
  --paper: #f8d8a2;
  --amber: #ffae4f;
  --pumpkin: #ff791c;
  --copper: #c95d1e;
  --outline: rgba(255,180,79,.42);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'Trebuchet MS', Verdana, Arial, sans-serif;
  --mono: 'Courier New', Courier, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 85px; }
body { margin: 0; min-width: 1080px; background: var(--night); color: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--pumpkin); color: var(--night); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid #fff1a5; outline-offset: 5px; }
img { max-width: 100%; }
.site-shell { width: 100%; overflow: hidden; }
.cursor-glow { position: fixed; width: 380px; height: 380px; left: -500px; top: -500px; transform: translate(-50%,-50%); background: radial-gradient(circle,rgba(247,136,40,.10) 0%,rgba(247,136,40,.035) 37%,transparent 69%); mix-blend-mode: screen; z-index: 80; pointer-events: none; opacity: 0; transition: opacity .25s ease; }

/* The gate / navigation */
.site-header { position: absolute; z-index: 50; top: 27px; left: 50%; transform: translateX(-50%); width: min(1810px,calc(100% - 100px)); display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 12px 12px; border: 1px solid rgba(255,211,129,.21); border-radius: 12px; background: rgba(5,17,35,.51); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); box-shadow: 0 14px 36px rgba(0,0,0,.18); transition: background .3s, border-color .3s; }
.site-header--scrolled { background: rgba(5,17,35,.77); border-color: rgba(255,193,98,.35); }
.brand { display: flex; align-items: center; gap: 13px; min-width: 310px; }
.brand__avatar { width: 51px; height: 51px; object-fit: contain; filter: drop-shadow(0 0 11px rgba(255,126,28,.28)); }
.brand__text { display: flex; flex-direction: column; gap: 3px; }
.brand__text strong { font-family: var(--serif); font-size: 25px; line-height: 1; letter-spacing: -.025em; color: #ffdda0; text-shadow: 1px 2px #672a1b; }
.brand__text small { font-size: 8.5px; font-weight: 800; letter-spacing: .20em; color: #fab76e; }
.main-nav { display: flex; align-items: center; gap: clamp(21px,2.6vw,50px); }
.main-nav > a { font-size: 12px; letter-spacing: .13em; font-weight: 900; color: #fbe7bd; white-space: nowrap; transition: color .2s,transform .2s; }
.main-nav > a:hover { color: #ffab56; transform: translateY(-2px); }
.main-nav > .nav-invite { background: linear-gradient(#ffbe69,#f8872b); color: #2c1a25; border: 2px solid #ffe5a1; box-shadow: 3px 4px 0 #6d351c,0 3px 22px #fd852b50; padding: 16px 24px; border-radius: 6px; }
.nav-invite span { font-size: 17px; padding-left: 13px; }
.main-nav > .nav-invite:hover { color: #1b1830; transform: translate(-2px,-3px); box-shadow: 5px 7px 0 #6d351c,0 3px 24px #fd852b50; }
.main-nav > .nav-invite:active { transform: translate(1px,2px); box-shadow: 1px 1px 0 #6d351c; }

/* Scene one — Claudia and the moonlit street */
.hero { position: relative; width: 100%; height: 1035px; min-height: 900px; isolation: isolate; background: #081931; }
.hero__landscape, .hero__veil, .hero__glimmer { position: absolute; inset: 0; pointer-events: none; }
.hero__landscape { background: url('../assets/background/world.webp') center 37% / cover no-repeat; transform: scale(1.038); transform-origin: center center; filter: saturate(1.17); z-index: -3; }
.hero__veil { z-index: -2; background: linear-gradient(90deg,rgba(4,13,29,.34) 0%,rgba(3,11,26,.08) 25%,rgba(5,14,31,.70) 49%,rgba(4,13,29,.92) 73%,rgba(4,14,28,.67) 100%),linear-gradient(180deg,rgba(3,10,23,.40),transparent 25%,rgba(3,11,25,.12) 61%,#071329 99%); }
.hero__glimmer { z-index: -1; background: radial-gradient(ellipse 600px 480px at 35% 48%,rgba(254,116,27,.13),transparent 70%),radial-gradient(ellipse 700px 580px at 77% 43%,rgba(37,91,157,.15),transparent 77%); }
.hero__moon-note { position: absolute; right: 8.5%; top: 139px; color: rgba(255,227,164,.63); font-size: 10px; letter-spacing: .32em; text-shadow: 0 0 12px #ffcb89; transform: rotate(-3deg); }
.hero__content { position: relative; width: min(1760px,100% - 90px); height: 100%; margin: 0 auto; }
.hero__character-wrap { --px: 0px; --py: 0px; position: absolute; z-index: 2; width: 980px; height: 980px; left: -133px; bottom: -114px; transform: translate3d(var(--px),var(--py),0); transition: transform .35s ease-out; }
.hero__halo { position: absolute; width: 595px; height: 725px; border-radius: 50%; top: 152px; left: 188px; background: radial-gradient(ellipse,rgba(255,121,30,.32) 0%,rgba(255,111,17,.15) 43%,transparent 72%); filter: blur(29px); animation: halo-breathe 5s ease-in-out infinite; }
.hero__character-float { width: 100%; height: 100%; animation: character-float 5.8s ease-in-out infinite; }
.character-trigger { position: absolute; inset: 0; display: block; cursor: pointer; border: 0; padding: 0; background: transparent; transition: filter .3s; }
.character-trigger:hover { filter: brightness(1.08) saturate(1.12); }
.character-trigger:active { filter: brightness(1.18); }
.character-trigger--wiggle { animation: friendly-wiggle .58s ease; }
.hero__character { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; image-rendering: auto; filter: drop-shadow(17px 15px 6px rgba(3,6,17,.54)) drop-shadow(-10px 0 24px rgba(255,114,26,.27)); }
.character-speech { position: absolute; z-index: 8; top: 155px; left: 63%; min-width: 248px; max-width: 300px; padding: 21px 24px; border-radius: 18px 18px 18px 4px; border: 3px solid #f9ce85; background: #fff0cc; box-shadow: 5px 6px 0 #a75124,0 12px 30px #0005; color: #2c2540; font-family: var(--serif); font-size: 22px; font-weight: bold; line-height: 1.1; text-align: center; opacity: 0; transform: translate(-10px,14px) rotate(-4deg) scale(.89); transition: opacity .2s,transform .3s; pointer-events: none; }
.character-speech--open { opacity: 1; transform: translate(0,0) rotate(-4deg) scale(1); }
.character-speech::after { content: ''; position: absolute; width: 17px; height: 17px; left: 19px; bottom: -12px; background: #fff0cc; border-right: 3px solid #f9ce85; border-bottom: 3px solid #f9ce85; transform: rotate(45deg); }
.character-seal { position: absolute; width: 113px; height: 113px; left: 170px; top: 410px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(14,30,52,.86); border: 2px solid rgba(255,180,79,.75); outline: 1px dashed rgba(255,188,108,.48); outline-offset: 5px; border-radius: 50%; color: #fcd79d; box-shadow: 0 4px 18px #0307169c; transform: rotate(-13deg); pointer-events: none; }
.character-seal > span { color: var(--amber); font-size: 25px; }
.character-seal small { text-align: center; font-size: 11px; letter-spacing: .12em; line-height: 1.2; font-weight: bold; }
.hero__copy { --px:0px;--py:0px; position: absolute; z-index: 5; left: 46.1%; top: 194px; width: 760px; max-width: 52%; transform: translate3d(var(--px),var(--py),0); transition: transform .35s ease-out; }
.eyebrow { display: flex; align-items: center; gap: 13px; font-size: 11px; font-weight: 900; color: #ffc987; letter-spacing: .30em; text-shadow: 0 1px 12px rgba(255,124,28,.6); }
.eyebrow__spark { font-size: 18px; color: #ff9e45; }
.hero__title { margin: 23px 0 13px; font-family: var(--serif); letter-spacing: -.072em; font-weight: bold; line-height: .84; filter: drop-shadow(0 4px 1px rgba(69,29,22,.85)); }
.hero__title span,.hero__title em { display: block; font-weight: bold; font-style: normal; }
.hero__title span { font-size: clamp(102px,7.0vw,142px); color: #ffedbe; text-shadow: 2px 2px 0 #d98c4d,5px 7px 0 #6b382e,0 0 54px rgba(255,162,70,.25); }
.hero__title em { font-size: clamp(109px,7.55vw,153px); color: #ff9b3c; background: linear-gradient(180deg,#ffcf73 0%,#ff9e43 46%,#f46c22 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(3px 6px 0 #642d20); padding: 11px 0 9px; }
.hero__tick { display: flex; align-items: center; gap: 19px; font-weight: bold; margin-top: 5px; color: #f9d4a0; }
.hero__tick > span { font-size: 11px; letter-spacing: .19em; }
.hero__tick b { font-family: var(--mono); font-size: 15px; letter-spacing: .09em; border: 1px solid #db7c36; padding: 7px 12px; border-radius: 5px; color: #ffd47f; background: rgba(104,48,26,.35); }
.hero__subtitle { max-width: 650px; font-size: 23px; font-weight: 400; line-height: 1.40; color: #f8e7cc; margin: 22px 0 25px; text-shadow: 1px 2px 2px rgba(0,0,0,.52); }
.contract-box { width: 100%; padding: 16px 18px 15px 22px; min-height: 99px; background: linear-gradient(125deg,rgba(10,27,49,.96),rgba(19,34,55,.96)); border: 1px solid #c77c3f; border-radius: 9px; box-shadow: 0 0 0 4px rgba(7,19,39,.77),0 10px 35px rgba(0,0,0,.36),inset 0 1px rgba(255,210,127,.14); }
.contract-box__top { display: flex; align-items: center; justify-content: space-between; color: #f6b675; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.contract-box__indicator { display: inline-block; width: 7px; height: 7px; background: #ffb04f; box-shadow: 0 0 14px #ff7d23; transform: rotate(45deg); margin-right: 9px; }
.contract-box__star { opacity: .5; }
.contract-box__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.contract-box__address { min-width: 0; max-width: 565px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff1cb; font-family: var(--mono); font-size: 16px; font-weight: bold; letter-spacing: .02em; }
.copy-button { flex-shrink: 0; min-width: 142px; height: 41px; border: 1px solid #f7b369; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #f5a547; box-shadow: 3px 3px 0 #733921; color: #181b30; cursor: pointer; font-size: 12px; font-weight: 1000; letter-spacing: .08em; transition: transform .18s,background .18s,box-shadow .18s; }
.copy-button svg { width: 17px; height: 17px; }
.copy-button:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 #733921; background: #ffd083; }
.copy-button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #733921; }
.copy-button.is-copied { background: #fff1cb; }
.hero__actions,.community-panel__actions { display: flex; gap: 17px; align-items: stretch; margin-top: 24px; }
.button { min-height: 65px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; padding: 0 25px; border-radius: 5px; font-size: 15px; font-weight: 1000; letter-spacing: .13em; cursor: pointer; transition: transform .22s ease,box-shadow .22s ease,background .22s; white-space: nowrap; }
.button--pump { min-width: 278px; background: linear-gradient(180deg,#ffc575,#ff8a29); color: #1d1c30; border: 2px solid #ffe4a4; box-shadow: 5px 6px 0 #9c421c,0 8px 28px rgba(255,114,22,.22); }
.button--x { min-width: 260px; background: rgba(16,31,54,.88); color: #ffe6b5; border: 2px solid #efb16b; box-shadow: 5px 6px 0 #713d2a; }
.button__star { font-size: 22px; line-height: 0; }
.x-mark { font-family: Arial,sans-serif; font-size: 24px; font-weight: bold; line-height: 1; }
.button__arrow { margin-left: auto; font-size: 20px; transition: transform .2s; }
.button:hover { transform: translate(-3px,-4px); }
.button:hover .button__arrow { transform: translate(3px,-3px); }
.button--pump:hover { box-shadow: 8px 10px 0 #9c421c,0 8px 35px #ff8c3570; background: linear-gradient(180deg,#ffdb97,#ffa63e); }
.button--x:hover { box-shadow: 8px 10px 0 #713d2a; background: rgba(37,56,85,.95); }
.button:active { transform: translate(3px,4px); box-shadow: 1px 1px 0 #9c421c; }
.hero__footnote { margin-top: 25px; color: #e0a66d; opacity: .88; font-size: 10px; font-weight: bold; letter-spacing: .20em; }
.hero__footnote span { padding-left: 8px; color: #ffb458; }
.scroll-cue { position: absolute; z-index: 4; left: 68px; bottom: 36px; display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: bold; letter-spacing: .2em; color: #ffd5a0; opacity: .87; }
.scroll-cue:hover { color: white; }
.scroll-cue__line { width: 49px; height: 1px; background: rgba(255,212,153,.65); }
.scroll-cue > span:last-child { font-size: 18px; animation: arrow-bob 2s ease infinite; }
.fireflies { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.firefly { position: absolute; width: var(--size); height: var(--size); border-radius: 50%; background: #fff0af; left: var(--x); top: var(--y); box-shadow: 0 0 7px 3px #fbb15a99; animation: firefly-pulse var(--duration) ease-in-out var(--delay) infinite; }
.ribbon { position: relative; z-index: 5; height: 75px; margin-top: -1px; background: #f4a34d; border-top: 4px solid #ffd98f; border-bottom: 5px solid #a54d23; box-shadow: 0 9px 25px rgba(0,0,0,.23); color: #14223c; overflow: hidden; display: flex; align-items: center; transform: rotate(-.33deg) scale(1.008); }
.ribbon__track { display: flex; width: max-content; white-space: nowrap; animation: ticker 36s linear infinite; }
.ribbon__track span { font-family: var(--serif); font-size: 24px; letter-spacing: .09em; font-weight: 900; padding-right: 15px; }

/* Scene two — the little haunted neighborhood */
.story-section { position: relative; min-height: 965px; padding: 135px max(6%,calc((100vw - 1630px)/2)) 155px; background: radial-gradient(ellipse 850px 600px at 85% 43%,rgba(24,56,97,.68),transparent 83%),linear-gradient(180deg,#0b1d3b 0%,#07152c 100%); isolation: isolate; }
.story-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(circle at 17% 24%,#fff1bc 1px,transparent 2px),radial-gradient(circle at 83% 77%,#fff1bc 1px,transparent 2px); background-size: 177px 179px,283px 271px; }
.story-section__inner { max-width: 1630px; margin: 0 auto; display: grid; grid-template-columns: minmax(460px, .96fr) minmax(550px,1.04fr); align-items: center; gap: 90px; }
.section-stars { position: absolute; top: 71px; left: 49%; color: #dd9c58; opacity: .6; letter-spacing: .5em; font-size: 22px; }
.section-kicker { display: flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 1000; letter-spacing: .22em; color: #e9a667; }
.section-kicker > span:first-child { color: #ffbd6f; font-family: var(--mono); letter-spacing: .05em; }
.section-kicker i { display: block; width: 55px; height: 1px; background: currentColor; opacity: .65; }
.story-section h2,.rules-section h2,.postcard-section h2,.community-section h2 { margin: 32px 0 31px; font-family: var(--serif); font-weight: 900; letter-spacing: -.061em; line-height: 1.045; }
.story-section h2 { font-size: clamp(72px,5.3vw,107px); max-width: 700px; }
.story-section h2 em,.rules-section h2 em,.postcard-section h2 em,.community-section h2 em { font-weight: 900; font-style: italic; color: #ffac53; }
.story-section__text > p { max-width: 590px; font-size: 19px; color: #d9d9cf; line-height: 1.7; }
.story-section__text > .story-lead { font-family: var(--serif); font-size: 25px; line-height: 1.47; color: #fbe4ba; }
.story-signature { display: inline-flex; align-items: center; gap: 14px; margin-top: 38px; padding: 12px 0; border-top: 1px solid rgba(255,183,87,.48); border-bottom: 1px solid rgba(255,183,87,.48); font-size: 11px; font-weight: bold; letter-spacing: .16em; color: #ffc079; }
.signature-spark { font-size: 28px; }
.story-section__art { position: relative; height: 650px; }
.portrait-frame { position: absolute; inset: 20px 42px 10px 25px; border: 12px solid #d68b46; outline: 1px solid #f9d28d; outline-offset: -7px; box-shadow: 15px 20px 0 #061024,18px 24px 50px rgba(0,0,0,.50),inset 0 0 0 3px #582d2a; border-radius: 165px 165px 7px 7px; overflow: hidden; transform: rotate(2.3deg); background: #102846; }
.portrait-frame__scene { position: absolute; inset: 0; background: url('../assets/background/world.webp') center 46% / cover no-repeat; transform: scale(1.20); transition: transform .9s; }
.portrait-frame:hover .portrait-frame__scene { transform: scale(1.25); }
.portrait-frame__shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 47%,rgba(4,12,24,.84) 100%); }
.portrait-frame__ribbon { position: absolute; left: 0; right: 0; bottom: 30px; text-align: center; font-size: 11px; font-weight: bold; letter-spacing: .20em; color: #ffdd9b; }
.portrait-frame__ribbon span { padding-left: 12px; }
.side-note { position: absolute; z-index: 2; font-weight: 900; letter-spacing: .16em; line-height: 1.3; }
.side-note--top { top: 45px; right: -25px; transform: rotate(12deg); font-size: 13px; color: #ffdc99; text-shadow: 1px 2px #723c2c; }
.side-note--top span { font-size: 24px; display: inline-block; transform: rotate(-16deg); }
.side-note--bottom { bottom: 11px; left: -43px; width: 138px; height: 138px; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 2px solid #ffcc82; outline: 1px dashed #ffe5ae; outline-offset: 4px; border-radius: 50%; background: #d97832; color: #211b2d; box-shadow: 5px 10px 0 rgba(2,8,22,.8); transform: rotate(-12deg); font-size: 14px; text-align: center; }
.side-note--bottom span { position: absolute; right: 25px; bottom: 23px; font-size: 22px; }
.story-section__bottom-ornament { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); font-size: 21px; letter-spacing: .5em; color: #b66d44; }

/* Scene three — crooked rules on pumpkin-orange paper */
.rules-section { position: relative; min-height: 815px; padding: 145px max(7%,calc((100vw - 1630px)/2)); background: radial-gradient(ellipse 650px 600px at 9% 25%,rgba(255,224,151,.48),transparent 65%),radial-gradient(ellipse 760px 700px at 85% 81%,rgba(189,69,27,.36),transparent 74%),linear-gradient(130deg,#efb36e,#de783d); color: #17213a; border-top: 8px solid #b85b2c; border-bottom: 8px solid #aa4e29; isolation: isolate; }
.rules-section::before { content: ''; inset: 0; position: absolute; z-index: -1; pointer-events: none; opacity: .24; background-image: repeating-linear-gradient(0deg,transparent,transparent 5px,rgba(123,59,34,.08) 6px),radial-gradient(circle at 19% 22%,#8f4225 1px,transparent 2px); background-size: auto,76px 84px; }
.rules-section__inner { max-width: 1570px; margin: auto; display: grid; grid-template-columns: 575px 1fr; gap: 105px; align-items: center; }
.rules-section .section-kicker { color: #783b2d; }
.rules-section .section-kicker > span:first-child { color: #693528; }
.rules-section h2 { font-size: clamp(70px,5.1vw,103px); margin-top: 33px; }
.rules-section h2 em { color: #812f23; }
.rules-section__heading > p { font-family: var(--serif); font-size: 25px; line-height: 1.4; max-width: 420px; color: #3d3040; }
.rules-section__sketch { margin: 40px 0 0 45px; font-family: var(--serif); font-style: italic; font-size: 23px; color: #873b2b; transform: rotate(-6deg); }
.rules-section__sketch span { font-style: normal; font-size: 27px; }
.rule-list { display: flex; flex-direction: column; }
.rule-item { min-height: 173px; display: grid; grid-template-columns: 69px minmax(0,1fr) 46px; align-items: center; gap: 19px; border-bottom: 2px solid rgba(88,46,41,.37); transition: transform .22s,background .22s; padding: 21px 9px 25px 0; }
.rule-item:first-child { border-top: 2px solid rgba(88,46,41,.37); }
.rule-item:hover { transform: translateX(8px); background: rgba(255,216,159,.12); }
.rule-item__number { color: #8b3c28; align-self: start; margin-top: 17px; font-family: var(--mono); font-size: 16px; font-weight: bold; }
.rule-item h3 { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(26px,2.15vw,41px); line-height: 1.14; letter-spacing: -.035em; }
.rule-item p { margin: 0; color: #593b3f; font-size: 17px; line-height: 1.55; }
.rule-item__symbol { font-size: 33px; color: #843b2d; transition: transform .3s; }
.rule-item:hover .rule-item__symbol { transform: rotate(45deg) scale(1.14); }
.rules-section__leaf { position: absolute; font-size: 78px; pointer-events: none; color: #a34c2b; opacity: .23; }
.leaf--one { left: -14px; top: 31px; transform: rotate(-33deg); }
.leaf--two { right: 54px; bottom: 29px; transform: rotate(13deg); }

/* Scene four — the original postcard banner */
.postcard-section { position: relative; padding: 122px max(4.8%,calc((100vw - 1750px)/2)) 150px; background: radial-gradient(ellipse 750px 510px at 50% 39%,rgba(39,70,116,.42),transparent 85%),#091831; }
.postcard-section::before { content: '✧'; position: absolute; top: 85px; right: 10%; font-size: 80px; color: rgba(246,176,99,.23); }
.postcard-section__heading { text-align: center; }
.section-kicker--center { justify-content: center; }
.postcard-section h2 { font-size: clamp(60px,4.7vw,94px); margin: 30px 0 70px; }
.postcard { position: relative; max-width: 1710px; margin: 0 auto; background: #102444; border: 8px solid #ad652f; outline: 2px solid #f2b971; outline-offset: 7px; box-shadow: 0 0 0 14px #142a4a,0 25px 95px rgba(0,0,0,.55),0 0 75px rgba(218,108,49,.14); }
.postcard img { width: 100%; height: auto; aspect-ratio: 2048/682; display: block; object-fit: contain; }
.postcard__corner { position: absolute; width: 43px; height: 43px; display: flex; justify-content: center; align-items: center; background: #ffbc5e; color: #592c28; font-size: 20px; border: 3px solid #512d2c; transform: rotate(45deg); }
.postcard__corner--tl { top: -27px; left: -27px; }
.postcard__corner--tr { top: -27px; right: -27px; }
.postcard__corner--bl { bottom: -27px; left: -27px; }
.postcard__corner--br { bottom: -27px; right: -27px; }
.postcard__corner::first-letter { transform: rotate(-45deg); }
.postcard figcaption { position: absolute; top: calc(100% + 31px); left: 0; width: 100%; text-align: center; color: #e9ae72; font-size: 11px; font-weight: bold; letter-spacing: .22em; }

/* Final scene — invitation to the neighborhood */
.community-section { min-height: 1040px; position: relative; padding: 118px 30px 124px; display: flex; align-items: center; justify-content: center; isolation: isolate; background: #08152a; }
.community-section__backdrop { position: absolute; inset: 0; z-index: -2; background: linear-gradient(rgba(4,12,28,.78),rgba(4,12,28,.85)),url('../assets/background/world.webp') center 43% / cover no-repeat; filter: saturate(.95); }
.community-section::before { position: absolute; inset: 0; z-index: -1; content: ''; pointer-events: none; background: radial-gradient(ellipse 850px 700px at center,rgba(235,113,34,.16),transparent 73%),linear-gradient(180deg,#091831 0%,transparent 18%,transparent 82%,#091831 100%); }
.community-section__embers { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); letter-spacing: 1.1em; color: #b98557; }
.community-panel { width: min(1100px,88vw); padding: 48px 75px 56px; border-radius: 150px 150px 18px 18px; border: 2px solid rgba(244,171,90,.82); outline: 8px solid rgba(7,19,41,.77); outline-offset: 7px; background: linear-gradient(160deg,rgba(13,30,56,.98),rgba(9,22,44,.985)); box-shadow: 0 0 0 12px rgba(244,154,69,.17),0 30px 100px rgba(0,0,0,.7),inset 0 1px 50px rgba(255,172,77,.06); display: flex; align-items: center; flex-direction: column; text-align: center; position: relative; }
.community-panel::before,.community-panel::after { content: '✦'; position: absolute; top: 250px; font-size: 28px; color: #c47b49; }
.community-panel::before { left: 55px; }
.community-panel::after { right: 55px; }
.community-panel__avatar { position: relative; width: 143px; height: 143px; margin: -108px auto 36px; }
.community-panel__avatar img { width: 100%; height: 100%; object-fit: cover; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.community-panel__avatar span { position: absolute; right: -7px; top: -9px; color: #ffd37a; font-size: 33px; }
.community-section h2 { font-size: clamp(67px,5.1vw,99px); line-height: 1.04; margin: 29px 0 19px; }
.community-section h2 em { color: #ffad57; }
.community-panel > p { font-family: var(--serif); font-size: 25px; color: #f1d7ac; line-height: 1.45; margin: 0 0 7px; }
.community-panel__actions { margin: 32px auto 45px; }
.community-panel__address { width: min(770px,100%); border-top: 1px solid rgba(255,179,86,.43); padding-top: 27px; }
.community-panel__address > span { color: #e7a966; font-size: 11px; font-weight: bold; letter-spacing: .25em; }
.community-panel__address > div { margin-top: 15px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #945e3d; padding: 9px 9px 9px 22px; background: rgba(3,15,34,.8); border-radius: 5px; min-height: 59px; }
.community-panel__address code { display: block; max-width: calc(100% - 148px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: bold; color: #ffe1a5; }
.community-panel__address button { display: flex; align-items: center; gap: 13px; justify-content: center; min-width: 138px; border: 1px solid #ffd38d; background: #f3ad59; color: #18243a; padding: 11px 15px; font-size: 12px; font-weight: bold; letter-spacing: .1em; cursor: pointer; transition: background .2s,transform .2s; }
.community-panel__address button:hover { background: #ffe1a1; transform: translateY(-2px); }
.community-panel__address button:active { transform: translateY(2px); }
.community-panel__address button.is-copied { background: #fff1ca; }

/* Footer and subtle discoveries */
.site-footer { min-height: 122px; padding: 25px max(5%,calc((100vw - 1730px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 25px; background: #061124; border-top: 1px solid rgba(250,156,78,.34); }
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; font-weight: bold; color: #ffd398; }
.site-footer > span { text-align: center; font-size: 10px; letter-spacing: .19em; color: #b8987c; font-weight: bold; }
.site-footer > a:last-child { font-size: 11px; font-weight: bold; color: #dcb081; letter-spacing: .12em; transition: color .2s; }
.site-footer > a:last-child:hover { color: #fff0c9; }
.toast { position: fixed; bottom: 35px; left: 50%; transform: translate(-50%,30px) scale(.94); z-index: 100; pointer-events: none; padding: 17px 28px; background: #f9c174; color: #21243a; border: 2px solid #fff0bf; box-shadow: 5px 7px 0 #5b332a,0 16px 40px #0008; font-size: 13px; font-weight: 900; letter-spacing: .14em; opacity: 0; transition: opacity .2s,transform .25s; }
.toast--visible { opacity: 1; transform: translate(-50%,0) scale(1); }
.has-reveal .reveal { opacity: 0; transform: translateY(35px); transition: opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1); transition-delay: var(--reveal-delay,0ms); }
.has-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes character-float { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-13px) rotate(.55deg); } }
@keyframes friendly-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2deg); } 52% { transform: rotate(2.5deg); } 75% { transform: rotate(-1.2deg); } }
@keyframes halo-breathe { 0%,100% { opacity: .80; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes firefly-pulse { 0%,100% { opacity: .13; transform: translate(0,0) scale(.65); } 45% { opacity: .95; transform: translate(7px,-14px) scale(1.3); } }
@keyframes arrow-bob { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@keyframes ticker { to { transform: translateX(-33.3333%); } }

/* Smaller desktop and laptop screens only; no mobile layout */
@media (max-width: 1620px) {
  .hero__content { width: calc(100% - 70px); }
  .hero__character-wrap { width: 870px; height: 870px; left: -125px; bottom: -68px; }
  .hero__copy { left: 46.8%; width: 720px; top: 214px; }
  .hero__title span { font-size: 116px; }
  .hero__title em { font-size: 126px; }
  .hero__subtitle { font-size: 21px; }
  .character-seal { left: 147px; }
  .story-section__inner { gap: 40px; }
  .rules-section__inner { grid-template-columns: 470px 1fr; gap: 65px; }
}
@media (max-width: 1320px) {
  .site-header { width: calc(100% - 55px); }
  .main-nav { gap: 19px; }
  .main-nav > a { font-size: 10px; }
  .brand { min-width: 280px; }
  .brand__text strong { font-size: 22px; }
  .hero { height: 920px; min-height: 920px; }
  .hero__character-wrap { width: 770px; height: 770px; left: -132px; bottom: -40px; }
  .hero__copy { left: 47%; top: 197px; width: 620px; max-width: 51%; }
  .hero__title span { font-size: 97px; }
  .hero__title em { font-size: 107px; }
  .hero__subtitle { font-size: 18px; line-height: 1.45; margin: 15px 0 20px; }
  .hero__tick > span { font-size: 9px; }
  .hero__tick b { font-size: 12px; }
  .eyebrow { font-size: 9px; }
  .contract-box { min-height: 88px; padding: 13px 14px; }
  .contract-box__address { font-size: 12px; }
  .copy-button { min-width: 110px; }
  .button { min-height: 58px; font-size: 12px; padding: 0 17px; gap: 10px; }
  .button--pump { min-width: 220px; }
  .button--x { min-width: 207px; }
  .hero__footnote { font-size: 8px; }
  .character-seal { width: 92px; height: 92px; left: 144px; top: 360px; }
  .story-section__inner { grid-template-columns: minmax(350px,1fr) minmax(430px,1fr); gap: 40px; }
  .story-section h2 { font-size: 74px; }
  .story-section__text > .story-lead { font-size: 22px; }
  .story-section__art { height: 565px; }
  .rules-section { padding-top: 110px; padding-bottom: 110px; }
  .rules-section__inner { grid-template-columns: 390px 1fr; gap: 40px; }
  .rules-section h2 { font-size: 70px; }
  .rule-item h3 { font-size: 30px; }
  .community-section h2 { font-size: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}