:root{--parchment-texture: url(/dragon-bond-parchment.webp);--button-texture: url(/dragon-bond-viking-button.webp);color:#111;background:#fff;font-family:Lexend Variable,Lexend,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-size:16px;line-height:1.5}.site-home{position:fixed;z-index:1000;top:16px;left:16px;width:64px;height:64px;padding:0;display:grid;place-items:center;border:0;background:none;filter:drop-shadow(3px 4px 3px rgba(21,15,10,.58));transition:transform .15s ease,filter .15s ease}.site-home:hover{transform:translateY(-2px) rotate(-1.5deg) scale(1.035);filter:brightness(1.06)}.site-home:focus-visible{outline:3px solid #7bf4d4;outline-offset:4px}.site-home img{display:block;width:100%;height:100%;object-fit:contain}main,footer{width:min(720px,calc(100% - 32px));margin:0 auto}main{min-height:calc(100vh - 110px)}.screen{display:none;padding:64px 0}.screen.active{display:block}body:has(#intro.active){overflow:hidden;background:#0b0d0d}body:has(#intro.active) footer{display:none}body:has(#quiz.active){overflow-x:hidden;background:#080b0a;color:#f5e8cf}body:has(#quiz.active) footer{display:none}body:has(#reveal.active){overflow-x:hidden;background:#07100f;color:#f2e7d1}body:has(#reveal.active) footer{display:none}.intro.active{width:100vw;min-height:100svh;margin-left:calc(50% - 50vw);padding:0;overflow:hidden;color:#f6e7ca;background:linear-gradient(90deg,rgba(8,11,12,.04) 0%,transparent 42%,rgba(4,6,6,.18) 100%),url(/dragon-bond-hero.webp) center center / cover no-repeat}.hero-stage{position:relative;min-height:100svh;isolation:isolate}.hero-stage:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,8,.2),transparent 22%,transparent 72%,rgba(5,7,8,.28)),linear-gradient(90deg,transparent 58%,rgba(3,5,5,.2))}.hero-panel-wrap{position:absolute;z-index:2;top:50%;right:clamp(34px,6vw,120px);width:min(440px,39vw);transform:translateY(-50%) rotate(-.45deg)}.hero-panel{position:relative;width:100%;padding:clamp(42px,4vw,62px) clamp(38px,3.5vw,56px) clamp(40px,3.8vw,58px);border:0;background:var(--parchment-texture) center / 100% 100% no-repeat;filter:drop-shadow(15px 20px 16px rgba(0,0,0,.55))}.hero-panel:before,.hero-panel:after{display:none}.hero-panel:before{z-index:0;inset:10px;border:1px solid rgba(184,145,92,.3);clip-path:polygon(0 2%,32% 0,34% 2%,100% 0,98% 54%,100% 58%,98% 100%,62% 98%,57% 100%,0 97%,2% 60%,0 55%)}.hero-panel:after{z-index:1;inset:0;opacity:.32;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E")}.hero-panel>:not(.panel-scar){position:relative;z-index:3}.panel-scar{position:absolute;z-index:2;display:block;height:1px;background:#d5a4674d;box-shadow:0 1px #000000d9;transform-origin:left center;pointer-events:none}.panel-scar:after{content:"";position:absolute;left:38%;top:-3px;width:32%;height:1px;background:inherit;transform:rotate(7deg)}.panel-scar-one{top:25px;right:19px;width:92px;transform:rotate(-7deg)}.panel-scar-two{left:22px;bottom:31px;width:70px;transform:rotate(10deg)}.hero-franchise{margin-bottom:18px;color:#7a3d1f;font-family:Lexend Variable,Lexend,sans-serif;font-size:clamp(.7rem,.9vw,.86rem);font-weight:700;letter-spacing:.19em;line-height:1.3;text-transform:uppercase}.hero-panel h1{margin:0;color:#352014;font-family:Lexend Variable,Lexend,sans-serif;font-size:clamp(2.65rem,4vw,4.25rem);font-weight:700;letter-spacing:-.045em;line-height:.98;text-shadow:none}.hero-invitation{margin:24px 0 27px;color:#573923;font-size:clamp(1rem,1.2vw,1.2rem)}#start{position:relative;min-width:210px;min-height:52px;margin:0;padding:12px 36px 13px;overflow:hidden;border:0;background:var(--button-texture) center / 100% 100% no-repeat;color:#f5e6cd;font-size:1.05rem;font-weight:800;letter-spacing:.06em;text-decoration:none;text-transform:uppercase;text-shadow:0 2px 2px #160d08,0 0 6px #000;filter:drop-shadow(4px 5px 3px rgba(30,14,8,.62));transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease}#start:hover{transform:translate(-2px,-2px) rotate(-.5deg);filter:brightness(1.06) saturate(1.08)}.hero-quip{position:absolute;z-index:4;margin:0;max-width:300px;font-family:Lexend Variable,Lexend,sans-serif;font-size:clamp(.88rem,1.25vw,1.18rem);font-weight:800;line-height:1.18;text-wrap:balance;text-shadow:-2px -2px 0 rgba(10,16,17,.82),2px -2px 0 rgba(10,16,17,.82),-2px 2px 0 rgba(10,16,17,.82),2px 2px 0 rgba(10,16,17,.82),0 5px 9px rgba(0,0,0,.55);transform:rotate(var(--tilt, -3deg));transform-origin:center;animation:quip-bounce 5.2s ease-in-out infinite}.quip-fishlegs{--tilt: -4deg;top:13%;left:8%;color:#ffe878;animation-delay:-1.4s}.hero-panel-wrap .quip-gobber{--tilt: -7deg;z-index:5;top:-51px;left:-124px;width:265px;color:#7bf4d4;font-size:clamp(.9rem,1.15vw,1.12rem);animation-name:gobber-bounce;animation-duration:4.4s;animation-delay:-.8s}@keyframes quip-bounce{0%,70%,to{transform:rotate(var(--tilt, -3deg)) scale(1)}77%{transform:rotate(var(--tilt, -3deg)) translateY(-3px) scale(1.055)}84%{transform:rotate(var(--tilt, -3deg)) scale(.985)}91%{transform:rotate(var(--tilt, -3deg)) translateY(-1px) scale(1.025)}}@keyframes gobber-bounce{0%,66%,to{transform:rotate(var(--tilt, -7deg)) scale(1)}74%{transform:rotate(var(--tilt, -7deg)) translateY(-4px) scale(1.075)}82%{transform:rotate(var(--tilt, -7deg)) scale(.98)}90%{transform:rotate(var(--tilt, -7deg)) translateY(-2px) scale(1.035)}}h1,h2,p,dl{margin-top:0}h1{margin-bottom:20px;font-size:2rem;line-height:1.15}h2{margin-bottom:8px;font-size:1rem}section section{margin-top:32px}button,a{font:inherit}button{padding:0;border:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:4px}button:disabled{cursor:default}#start,.result-actions button{margin:16px 24px 24px 0;font-weight:700}#quiz.active{position:relative;width:100vw;min-height:100svh;margin-left:calc(50% - 50vw);padding:clamp(104px,11vh,138px) 22px 54px;display:flex;align-items:center;justify-content:center;isolation:isolate;background:linear-gradient(180deg,#03050540,#04070680),radial-gradient(circle at 50% 45%,transparent 10%,rgba(2,4,3,.28) 72%,rgba(1,2,2,.7) 100%),url(/dragon-bond-quiz.webp) center center / cover no-repeat}#quiz.active:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,7,6,.2),transparent 27%,transparent 73%,rgba(4,7,6,.2)),url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");mix-blend-mode:multiply}.question-card{position:relative;width:min(850px,calc(100vw - 44px));margin:auto;padding:clamp(34px,5vw,58px) clamp(28px,5.5vw,66px) clamp(30px,4.5vw,50px);overflow:hidden;color:#392517;border:0;background:var(--parchment-texture) center / 100% 100% no-repeat;filter:drop-shadow(0 24px 24px rgba(0,0,0,.62))}.question-card:before,.question-card:after{display:none}.question-card:before{inset:11px;border:1px solid rgba(197,148,88,.22);clip-path:polygon(0 1%,32% 0,35% 1%,100% 0,99% 51%,100% 55%,99% 100%,61% 99%,58% 100%,0 99%,1% 58%,0 54%)}.question-card:after{top:24px;right:28px;width:106px;height:1px;opacity:.48;background:#c29159;box-shadow:0 1px #000;transform:rotate(-6deg)}.question-card>*{position:relative;z-index:1}.question-count{margin-bottom:18px;color:#8b4422;font-size:.76rem;font-weight:800;letter-spacing:.18em}.question-card h1{max-width:760px;margin-bottom:10px;color:#352014;font-family:Lexend Variable,Lexend,sans-serif;font-size:clamp(1.85rem,3.4vw,2.75rem);font-weight:700;letter-spacing:-.028em;line-height:1.1;text-wrap:balance;text-shadow:none}.selection-hint{margin:0;color:#725a41;font-size:.9rem}.answers{margin:28px 0 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.answer{position:relative;width:100%;min-height:58px;padding:11px 24px;border:0;display:flex;align-items:center;gap:12px;overflow:hidden;color:#f2e5d1;background:var(--button-texture) center / 100% 100% no-repeat;filter:drop-shadow(0 4px 3px rgba(28,13,7,.48));text-align:left;text-decoration:none;transition:border-color .13s ease,background-color .13s ease,color .13s ease,transform .13s ease,opacity .13s ease}.answer span{flex:0 0 27px;width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(234,208,170,.58);border-radius:50%;color:#f5dfbd;font-size:.72rem;font-weight:900}.answer p{margin:0;line-height:1.25;text-shadow:0 2px 2px #130b07,0 0 5px #000}.answer:hover:not(:disabled),.answer:focus-visible{color:#fff4df;filter:drop-shadow(0 6px 5px rgba(29,13,7,.58)) brightness(1.13);transform:translateY(-1px)}.answer.selected{color:#fff4df;background:var(--button-texture) center / 100% 100% no-repeat;filter:drop-shadow(0 0 7px rgba(224,133,66,.95)) brightness(1.18) saturate(1.16)}.answer.selected span{border-color:#ffd098;color:#25130b;background:#efad6c}.answer:disabled:not(.selected){opacity:.42}.question-actions{min-height:42px;display:flex;align-items:center;gap:18px}.question-actions button{min-width:150px;min-height:46px;padding:9px 28px 10px;border:0;color:#f2e5d1;background:var(--button-texture) center / 100% 100% no-repeat;font-size:.85rem;font-weight:800;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;text-shadow:0 2px 2px #130b07,0 0 5px #000;filter:drop-shadow(3px 4px 3px rgba(28,13,7,.48))}.question-actions #continue{margin-left:auto;color:#fff0da;background:var(--button-texture) center / 100% 100% no-repeat}.question-actions button:hover:not(:disabled){color:#fff7e8;filter:brightness(1.13);transform:translateY(-1px)}#reveal.active{position:relative;width:100vw;min-height:100svh;margin-left:calc(50% - 50vw);padding:108px 22px 64px;display:flex;align-items:flex-start;justify-content:center;isolation:isolate;background:linear-gradient(180deg,#0309093d,#020707a8),radial-gradient(circle at 50% 35%,transparent 8%,rgba(2,7,7,.14) 58%,rgba(2,6,6,.66) 100%),url(/dragon-bond-result.webp) center center / cover fixed no-repeat}#reveal.active:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}.result-panel{position:relative;width:min(880px,calc(100vw - 44px));padding:clamp(52px,7vw,78px) clamp(42px,7vw,76px);overflow:visible;color:#352214;border:0;background:var(--parchment-texture) center / 100% 100% no-repeat;filter:drop-shadow(0 28px 32px rgba(0,0,0,.68))}.result-panel:before,.result-panel:after{display:none}.result-panel>*{position:relative;z-index:1}.result-identity{display:grid;grid-template-columns:minmax(210px,275px) 1fr;align-items:center;gap:clamp(26px,5vw,52px)}.result-title{min-width:0}.result-image-frame{position:relative;aspect-ratio:4 / 3;padding:10px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(225,181,117,.55);clip-path:polygon(2% 0,96% 2%,100% 8%,98% 94%,92% 100%,4% 98%,0 90%,2% 7%);background:radial-gradient(circle at 48% 44%,rgba(110,145,130,.22),transparent 64%),#040808d9;box-shadow:inset 0 0 28px #000c,7px 9px #02050485}.result-image-frame:after{content:"";position:absolute;inset:7px;border:1px solid rgba(204,157,97,.18);pointer-events:none}#result-image{display:block;width:100%;height:100%;object-fit:contain;transform:translateY(-6%);filter:drop-shadow(0 10px 12px rgba(0,0,0,.65))}.result-title h1{margin:0;max-width:100%;color:#3c2112;font-family:Lexend Variable,Lexend,sans-serif;font-size:clamp(2.45rem,5vw,4rem);font-weight:700;letter-spacing:-.045em;line-height:1;overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}.result-title h1.long-name{font-size:clamp(2.15rem,4.3vw,3.45rem)}.result-reason,.dragon-profile,.result-person{margin-top:clamp(36px,6vw,58px);padding-top:clamp(28px,4vw,38px);border-top:1px solid rgba(91,52,27,.26)}.result-panel h2{margin-bottom:14px;color:#713b20;font-family:Lexend Variable,Lexend,sans-serif;font-size:clamp(1.4rem,2.7vw,2rem);letter-spacing:-.02em}.result-reason p{max-width:750px;margin-bottom:13px;color:#392719;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.68}.dragon-details{margin:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(190px,.55fr);gap:18px}.dragon-details>div{min-width:0}.dragon-details dt{margin-bottom:7px;color:#7b4021;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.dragon-details dd{margin:0;color:#392719;font-size:.95rem;line-height:1.55}.habitat-types,.habitat-fit{display:block}.habitat-types{margin-bottom:9px;color:#4a2a18;font-size:1rem;font-weight:800;line-height:1.45}.habitat-fit{color:#624934;font-size:.9rem;line-height:1.58}.dragon-source{min-height:46px;padding:10px 28px;display:flex;align-items:center;justify-content:center;color:#f2e5d1;background:var(--button-texture) center / 100% 100% no-repeat;filter:drop-shadow(3px 4px 3px rgba(28,13,7,.48));font-size:.8rem;font-weight:800;letter-spacing:.04em;line-height:1.15;text-align:center;text-decoration:none;text-shadow:0 2px 2px #130b07,0 0 5px #000;text-transform:uppercase}.dragon-source:hover{color:#fff7e8;filter:drop-shadow(0 6px 5px rgba(29,13,7,.58)) brightness(1.13);transform:translateY(-1px)}.result-person p{max-width:780px;margin:0;color:#392719;font-size:clamp(1rem,1.6vw,1.1rem);line-height:1.7}.result-actions{margin-top:42px;padding-top:30px;display:flex;flex-wrap:wrap;gap:13px;border-top:1px solid rgba(91,52,27,.26)}.result-actions button{min-width:162px;margin:0;padding:12px 24px 13px;min-height:48px;border:0;color:#f2e5d1;background:var(--button-texture) center / 100% 100% no-repeat;filter:drop-shadow(4px 5px 3px rgba(28,13,7,.5));font-size:.84rem;font-weight:900;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;text-shadow:0 2px 2px #130b07,0 0 5px #000;transition:transform .14s ease,filter .14s ease}.result-actions #restart{color:#f2e5d1;background:var(--button-texture) center / 100% 100% no-repeat}.result-actions button:hover{transform:translate(-1px,-2px);filter:brightness(1.15)}#share-status{margin:20px 0 0;color:#426652;font-size:.85rem}#share-status:empty{display:none}footer{padding:24px 0 40px;font-size:.875rem}footer p{margin-bottom:8px}@media(max-width:900px){.intro.active{background-position:38% center}.hero-stage{min-height:100svh;padding:130px 14px 24px;display:flex;align-items:flex-end}.hero-panel-wrap{position:relative;top:auto;right:auto;width:min(470px,100%);margin:0 20px 0 auto;transform:rotate(-.35deg)}.hero-panel{padding:43px 38px 39px}.hero-panel h1{font-size:clamp(2.5rem,8vw,3.65rem)}.hero-panel-wrap .quip-gobber{top:-58px;left:-44px;width:245px}.quip-fishlegs{top:27px;left:22px}}@media(max-height:680px)and (min-width:901px){.hero-panel{padding-top:38px;padding-bottom:36px}.hero-panel h1{font-size:clamp(2.5rem,3.5vw,3.6rem)}.hero-invitation{margin:17px 0 20px}}@media(max-width:560px){.screen{padding:32px 0}h1{font-size:1.65rem}.intro.active{padding:0;background-position:36% center}.hero-stage{padding:152px 12px 18px}.hero-stage:after{background:linear-gradient(180deg,rgba(5,7,8,.18),transparent 24%,rgba(4,6,7,.08) 53%,rgba(4,5,5,.66) 100%),linear-gradient(90deg,transparent 38%,rgba(3,5,5,.13))}.hero-panel-wrap{width:100%;margin:0}.hero-panel{padding:41px 27px 34px}.hero-franchise{margin-bottom:14px;font-size:.68rem}.hero-panel h1{font-size:clamp(2.35rem,11vw,3.1rem)}.hero-invitation{margin:18px 0 21px}#start{min-width:162px;padding:12px 24px 13px;font-size:.95rem}.hero-panel-wrap .quip-gobber{top:-64px;left:13px;width:min(245px,75vw);font-size:.82rem}.quip-fishlegs{font-size:.78rem}.quip-fishlegs{top:28px;right:14px;left:auto;width:210px;text-align:right}.site-home{top:11px;left:11px;width:56px;height:56px;padding:0}#quiz.active{min-height:100svh;padding:96px 11px 30px;align-items:flex-start;background-position:center top}.question-card{width:100%;padding:34px 22px 27px}.question-card h1{font-size:clamp(1.65rem,8vw,2.15rem)}.answers{margin-top:22px;grid-template-columns:1fr;gap:8px}.answer{min-height:52px;padding:9px 21px}.question-actions button{min-width:128px;padding-right:22px;padding-left:22px}#reveal.active{padding:94px 10px 32px;background-attachment:scroll}.result-panel{width:100%;padding:44px 28px 47px}.result-identity{grid-template-columns:minmax(105px,37%) 1fr;gap:17px;align-items:center}.result-image-frame{padding:6px;box-shadow:inset 0 0 22px #000c,4px 5px #02050485}.result-title h1{font-size:clamp(1.65rem,8.1vw,2.35rem)}.result-title h1.long-name{font-size:clamp(1.45rem,7vw,2.05rem)}.result-reason,.dragon-profile,.result-person{margin-top:31px;padding-top:25px}.dragon-details{grid-template-columns:1fr}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.result-actions button{min-width:0;padding-right:12px;padding-left:12px;font-size:.74rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-quip{animation:none}}