/* ===== Nicole & Nora quiz — playful layer ===== */
:root{--nn-ease:cubic-bezier(.22,1,.36,1);}
body{overflow-x:hidden;}
#nnpaws,#nnfx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9997;}
#nnfx{z-index:10001;}
/* intro stage */
.qstage{position:relative;width:100%;aspect-ratio:900/600;margin:0 0 14px;}
.qstage .frame2{position:absolute;left:0;right:0;bottom:0;height:76%;border:2px solid var(--gold);border-radius:16px;background:radial-gradient(120% 80% at 50% 100%,#1a1614 0%,#101010 70%);box-shadow:0 20px 50px rgba(0,0,0,.55);}
.qstage .floor{position:absolute;left:12%;right:12%;bottom:0;height:26px;border-radius:50%;background:rgba(0,0,0,.7);filter:blur(10px);}
.qstage .bob{position:absolute;left:-3%;right:-3%;bottom:6px;animation:nnbob 3.6s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes nnbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.qstage img.dogs{display:block;width:100%;height:auto;transform-origin:50% 90%;transition:transform .18s ease-out;cursor:pointer;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 16px 22px rgba(0,0,0,.6));}
.qstage img.dogs.boop{animation:nnboop .55s var(--nn-ease);}
@keyframes nnboop{0%{transform:scale(1)}30%{transform:scale(1.05) rotate(-2deg)}60%{transform:scale(.98) rotate(1.5deg)}100%{transform:scale(1)}}
.qbubble{position:absolute;top:0;left:50%;width:max-content;max-width:min(260px,70%);transform:translate(-50%,10px);background:#F4ECDD;color:#241C18;font-size:14px;line-height:1.35;padding:9px 13px;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .35s,transform .35s var(--nn-ease);pointer-events:none;font-weight:600;z-index:3;}
.qbubble:after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#F4ECDD;transform:translateX(-50%) rotate(45deg);border-radius:2px;}
.qbubble.on{opacity:1;transform:translate(-50%,0);}
.qbubble.left{left:26%;} .qbubble.right{left:74%;}
.qhint{color:#8C8377;font-size:11px;text-align:center;letter-spacing:.6px;text-transform:uppercase;margin:-4px 0 14px;}
h1 span.w{display:inline-block;animation:nnrise .7s var(--nn-ease) both;}
@keyframes nnrise{from{opacity:0;transform:translateY(14px) rotate(-1.5deg)}to{opacity:1;transform:none}}
/* buttons */
.btn{position:relative;transition:transform .15s var(--nn-ease),box-shadow .15s;box-shadow:0 4px 0 #b07e84;}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 0 #b07e84,0 14px 30px rgba(233,176,182,.25);}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #b07e84;}
/* quiz */
.bar{position:relative;overflow:visible!important;margin-bottom:34px!important;}
.bar>span{border-radius:6px;transition:width .5s var(--nn-ease)!important;}
.bar .runner{position:absolute;top:-22px;left:0;width:50px;height:auto;transform:translateX(-50%);transition:left .5s var(--nn-ease);filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));pointer-events:none;}
.q.in{animation:nnrise .45s var(--nn-ease) both;}
.opt{position:relative;overflow:hidden;transition:transform .15s var(--nn-ease),border-color .2s,background .2s!important;}
.opt.in{animation:nnrise .45s var(--nn-ease) both;}
.opt:hover{transform:translateX(6px)!important;border-color:var(--pink);}
.opt:before{content:"🐾";position:absolute;right:14px;top:50%;transform:translateY(-50%) scale(.6);opacity:0;transition:opacity .2s,transform .3s var(--nn-ease);}
.opt:hover:before{opacity:.8;transform:translateY(-50%) scale(1);}
.opt.picked{background:var(--pink)!important;color:#241C18!important;border-color:var(--pink)!important;animation:nnpick .45s var(--nn-ease);}
@keyframes nnpick{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.sniff{margin:18px 0 6px;padding:14px 16px;background:var(--card);border:1px solid #3a3530;border-radius:14px;}
.sniff .lbl{color:var(--gold);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:10px;text-align:center;}
.sniff .rows{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.sniff .r{text-align:center;}
.sniff .r .e{font-size:20px;}
.sniff .r .t{height:8px;background:#2f2c29;border-radius:8px;overflow:hidden;margin:6px 0 4px;}
.sniff .r .t i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--pink));transition:width .6s var(--nn-ease);}
.sniff .r small{color:var(--muted);font-size:10px;}
.qreact{position:fixed;left:50%;bottom:22px;width:max-content;transform:translate(-50%,20px);background:#F4ECDD;color:#241C18;padding:10px 16px;border-radius:30px;font-weight:700;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .3s,transform .4s var(--nn-ease);z-index:10002;pointer-events:none;max-width:92vw;text-align:center;}
.qreact.on{opacity:1;transform:translate(-50%,0);}
/* gate */
#gate{position:relative;}
#gate .peek{position:absolute;right:-26px;top:-70px;width:120px;height:auto;transform:scaleX(-1) rotate(-6deg);filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));animation:nnpeek .8s var(--nn-ease) both;pointer-events:none;}
@keyframes nnpeek{from{opacity:0;transform:scaleX(-1) rotate(-6deg) translateY(30px)}to{opacity:1;transform:scaleX(-1) rotate(-6deg) translateY(0)}}
@media(max-width:600px){#gate .peek{width:90px;right:-14px;top:-56px;}}
#gate .kick,#gate h1,#gate .sub,#gate form{animation:nnrise .5s var(--nn-ease) both;}
#gate .sub{animation-delay:.1s}#gate form{animation-delay:.2s}
/* result */
#result .result-emoji{animation:nnjump .9s var(--nn-ease) both;}
@keyframes nnjump{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
#result .rcard{animation:nnrise .6s var(--nn-ease) .15s both;}
#result .rcard h2{animation:nnrise .6s var(--nn-ease) .3s both;}
.compare{margin-top:12px;background:var(--card);border:1px solid #3a3530;border-radius:14px;padding:14px 16px;}
.compare .row{display:grid;grid-template-columns:28px 1fr 34px;gap:10px;align-items:center;margin:7px 0;font-size:13px;}
.compare .row .t{height:10px;background:#2f2c29;border-radius:8px;overflow:hidden;}
.compare .row .t i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--pink));transition:width .9s var(--nn-ease);}
.compare .row b{color:var(--gold);text-align:right;font-variant-numeric:tabular-nums;}
.compare .row.top .t i{background:var(--pink);}
.mini{display:inline-block;background:transparent;border:1px solid var(--gold);color:var(--gold);border-radius:30px;padding:8px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;margin:4px;}
.mini:hover{background:var(--gold);color:#241C18;}
@media(prefers-reduced-motion:reduce){.qstage .bob,h1 span.w,.q.in,.opt.in,#result .result-emoji,#gate .peek{animation:none!important;}}